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Welcome 


Welcome 
to the issue 


THE WEB DESIGNER MISSION. 


Web Components. Try now 


reveal how to get started with Polymer, build 
2011, but browser vendors have been custom elements and extend existing elements 
slow to follow, very slow. But Chrome now to suit. Plus, discover third-party elements to try 
and what the next version of Polymer will bring. 
Web accessibility is another part of the 

design and development process that has had a 
Slow adoption. But still the web is awash with 
Sites that simply dont give it a second thought. 
It’s about time everyone did and our feature on 


Highlight 


eb components have been around since 


offers full support, Firefox can and Edge 
cant. But, with Google pushing it forward 
Web Components are happening. The 
option to create custom code, build 
reusable elements and get better 

builds is an opportunity not to miss. 


In our lead feature (p44) you will find 
out what’s happening in the world of Web 
Components, who's using them and how 
Google's Polymer library is a key driver in 
helping to start the build process using Web 
Components. A selection of short tutorials 


page 66 tells you how to go all-inclusive. 
WordPress is hardly a newcomer to web 
design, but keeping it safe and secure is still 
as important as it’s always been. Discover a 
collection of must-know security secrets in 
our feature on page /4. Enjoy the issue. 


Follow us on Twitter for all the news & conversation 
Visit our blog for opinion, freebies & more 


Passion and technical prowess, has ensured 
that Spring/Summer is a sought-after agency. 
Web Designer finds out more. Page 36 


Video Tuition - Over 175 minutes of expert PWA video guides 
from Pluralsight (pluralsight.com) 


Assets - 24 Urban desaturated effects and 7 Holographic Photoshop 
styles from Sparklestock (sparklestock.com) 


- Tutorial files and assets 
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welcome 


Contributors 


This issue’s panel of experts 


Welcome to that bit of the mag where we learn more 


about the featured writers and contributors... 


HOW TO GET READY FOR THE FUTURE OF HTML 


J 


Simon Jones 

Simon works with a variety of 
front-end frameworks which 
each bring different 
approaches to development. 
This issue, he looks at how 
Polymer, a web component 
library from Google, can help 
you easily write highly 
modular code for the web. 
Page 44 


Anumber of libraries seek to make web components 
more widely compatible and simpler to work with. The 
most prolific of these is Googles Polymer library 


Ashley Firth 


Ashley is head of front-end 
development at start-up 
energy company Octopus 
Energy. In this issue he talks 
about designing and 
developing for general web 
accessibility, and how to 
help specific disabilities. 

. Page 66 


Paul Betteridge 


Paul has 15 years’ 
experience and has been 
cherry picked as a ‘Google 
Leader. In this issue he 
takes a closer look at how 

| to convert visitors to 

= customers using the best 
CRO techniques for bettter 
returns. Page 58 


Matt Crouch 


Matt is a frontend developer 
based in London. In this 
issue, he will be going 
through how to create a 
dynamic and informative 
data mashup site based on 
the user’s location using the 
Twitter, Flickr and Google 
Maps APIs. Page 80 


Mark Shufflebottom 


Mark is a Professor of 
Interaction Design at 
Sheridan College and is also 


an Adobe Education Leader. 


In this issue, Mark is starting 


the first in a two-part tutorial, 


creating an endless flying 
game in WebGL with 
ThreeJS. Page 54 


Steven Roberts 


Steven is a multi-disciplined 
designer/developer from 
Teesside. Having recently 
changed jobs he’s currently 
delving into the world of 
events with Asemblr.co. 
Check out his tutorial on 
improving the performance 
of web animation. Page 86 


Leon Brown 


Leon is a freelance web 
developer and trainer who 
assists web developers in 
creating efficient code for 
projects. This issue he 
recreates a host of 


" techniques as inspired by 


the top-class sites seen in 
Lightbox. Page 16 


Sarah Maynard 


Sarah is a freelance writer, 
WordPress developer and 
digital illustrator. In this issue 
she covers eight 
need-to-know secrets that 
will keep your WordPress 
install safe, secure and free 
from Unwanted intrusions. 
Page 74 


Luke Harrison 


Luke is a web developer 
from Sheffield, UK who is all 
about scalable & efficient 
front-end architecture. In 
this issue, he explores how 
to create a simple web page 
design using the popular 
MacOS app Sketch. 

Page 62 
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Media Temple web hosting delivers premium performance and 
support so that creative professionals and enterprises can 
focus on bold ideas, not web servers. 


mediatemple.net 
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Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here's how to stay in touch... 
steve. jenkins@futurenet.com e @WebDesignerMag e www.creativeblog.com 


O8 Browser compatibility 
Mozilla reveals how they are helping users find 
an easier way to get browser support info 
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resources out there 
Discover the libraries and frameworks that 
will make your site a better place to visit 
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Todd Anglin of Progress suggests devs 
Should be building Al into everything 


16 Lightbox 


A showcase of inspirational sites and the 
techniques used to create them 


28 Adifferent drum 
Not all digital projects are created equal. We find 
out how lone freelance designer Hector Monerris 
built One Last Beat 


36 Seasonal design 
Passion coupled with technical prowess has 
made Spring/Summer a sought-after agency 


Better builds with 

Web Components 

Build fully modular code for the web today 
with Web Components and Polymer 


Web accessibility 
Learn how to design and develop your 
web sites to be truly inclusive 


74 8WordPress security secrets 
Learn how to prevent, deter and recover from 


attacks on your WordPress website = re 
v omsterano0's 
92 Hosting listings 
An extensive list of web hosting companies. rion 
Pick the perfect host for your needs > 


94 Course listings 
Want to start learning online? Check out 
What courses are out there with this list 
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Never miss 
an issue 


Subscribe 


Turn to page 14 now 


Save on the cover price and get 
the mag delivered to your door 


Set up a project for creating a stunning endless flying 3D 
game using ThreeJS in part one of this two-parter 


Convert visitors to customers 
Discover the benefits of Conversion Rate Optimisation 
and convert existing traffic and increase your ROI 


Design with Sketch 


Create a simple web page design using Sketch and 
discover essential tips and tricks along the way 
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programminglanguage | Wel Workshop 


or approach that will 
work foreveryone  ««. Code animated mouse effects 
wae www.charlyzenger.ch/en 
COMMENT — Todd Anglin — p11 7 Make your mouse pointer stand out from the crowd 


Web Developer 


8 WordPress security secrets 
An essential collection of tips to keep your 
install safe and secure 


Visualise data mashups with APIs 


How to aggregate Twitter and Flickr data, plot itona 
map and keep up with what’s happening around you 


Improve animation performance 


36 —_— 16 ieee a Take an in-depth look at how to create silky smooth 
ProFile: Spring/ Summer Lightbox: Mr. Fis animations. Find out which properties perform best 
Amuch sought after Danish agency Making fish fashionable 
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Header 


The tools, trends and news to 
inspire your web projects 


Browser compatibility: 
Who does what? 


Mozilla is bringing together its browser compatibility tables in one 
GitHub resource. Say hello to the Browser Compatibility Project 


rowsers, everyone is Using 
them. It doesnt matter if you 
use Chrome, Firefox, Safari, 
Opera, Edge or some 
lesser-known entity, you are still using them. 
What you use is simply a matter of personal 
preference. We all know that Chrome is the 
biggest player in the market. According to 
statcounter (gs.statcounter.com) Chrome 
currently engulfs the competition with over 
56 per cent of the market share worldwide. 
Who's next in the line-up? Safari with 14 per 
cent. Then there’s UC Browser with eight 
per cent, Firefox with five per cent and 
Opera with four per cent. Change from 
worldwide market share to specific 
continent market share and the stats 
change. In Europe, Chrome is way out in 
front with Safari closing the gap. Head to 
North America and the gap between the 
two comes down to around 25 per cent. 
But the stats prove that Chrome is the 
undisputed number one browser across 
the globe. It hovers around the 50-60 per 
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cent mark for market share with none of 
the others getting close. While this means 
that it is the most popular browser in the 
world it is still only occupying 50-60 per 
cent of the market. Which means that 
40-50 per cent of browser users are still 
using an alternative to Chrome. But none 
in the same sort of quantity, but still an 


designers and developers need all the 
help they can get. 

As we know different browser vendors 
have different priorities, resources (cash/ 
people), features and obviously all are 
looking for a competitive edge so typically 
get released at different times. So what 
Should designers and developers do? Any 


66 Any help is good and this is 
where Mozilla comes in 99 


alternative. However you look at it that’s 
a lot of users not using Chrome. 

As designers and developers it is always 
good to know which browsers are the 
preferred choice of your users. In an ideal 
world all would be equal but they are not, 
So it is important that designers and 
developers are aware of what is Supported 
and what works in what browser. And lets 
not forget the ridiculous number of devices 
that the web can be viewed on. So, 


help is good and this is where Mozilla's 
Browser Compatibility Project comes in. 
Mozilla already provides browser 
compatibility tables, but as it states: “Whilst 
unquestionably helpful, this resource alone 
doesnt eliminate all challenges”. It’s now 
working on migrating the compatibility 
information currently stored on thousands 
of wiki pages to a machine-readable JSON 
format on Github. Find out more at: 
github.com/mdn/browser-compat-data. 


WEB DESIGNER 
DIGITAL EDITION 


Do you want to get your hands on 
a digital edition of your favourite 
web design magazine? Head to 
your preferred app store — Google 
Play (bit.ly/2wetvGp) or iTunes 
(apple.co/2igtBYq) — then 


In-depth tutorials, 
expert tips, 
cutting-edge 
features, industry 
interviews, 
inspiration and 
opinion. Make 
sure to get your 
daily dose of 
creativity, design 
and development. 


issue of choice from within the app. 
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Whos got the 
biggest market 
share? 


Europe 


5/25 


Desktop wins over 
mobile (47.72%) 


PP PRESS EPPS EA PET TL RT 


North America 


53.71% 


Desktop wins over 
mobile (46.29%) 


Africa 


65.907 


Mobile wins over 
desktop (34.10%) 


South America 


59.64 


Desktop wins over 
mobile (40.35%) 


Mobile wins over 
desktop (49.38%) 


Source: gs.statcountercom 
*includes mobile and tablet 
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Sites of the month 
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—— » O44. | THEGLOBAL GOALS 01. Okkapi 


okkapi.agency/en 
User interaction activates a background 


kaleidoscope effect. 


O02. Red Collar 


2017.redcollar.digital 
Follow the light to see amazing real light 


effects. Sit and admire. 


O03. Blend 
blendingpoint.com 
A heavily blurred image appears from 


the mist to reveal more. 


04. The Global Goals 
globalgoals.org 

“ian A grid-based design that perfectly slips 
into mobile mode. 


e ) 
Graphics Colour picker Typesetter WordPress 
ITsumma Pink valentine Muara Bolec 
bit.ly/2EPKO5b bit.ly/2oamvp2 bit.ly/2o0ajogL bit.ly/2CyMAIl 
A gorgeous collection of illustrations for A retro-modern typeface with a classic look. If you like fullscreen and simple then this 
ITsumma by the talented Spoon Jar. rrTS Ideal for books, packaging and branding. multi-talented theme is for you. 
#D43C84 
#CA4E9C PERERA 
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webkit 


Discover the must-try resources that 
Will make your site a better place 


Phaser 3 


github.com/photonstorm/phaser 

In case you don’t know Phaser is a free 
and fast 2D game framework for making 
HTML5 games for desktop and mobile 
web browsers. It supports Canvas and 


Vecta 

vecta.io 

Vecta is a real-time, collaborative, 
advanced SVG editor. Create diagrams 
to visualise your backend architecture 
or agile processes. 


Blotter.js 

blotter.js.org 

If you want to create unconventional, 
and impressive, text effects for the web 
then this JavaScript API is the ideal tool 
for your projects. 


fullstory 

fullstory.com/free 

How are customers using your website? 
What experience are they getting? 
Fullstory will capture everything, 

ready for you to analyse. 


TOP 5 Web conferences - April 2018 


Get yourself a seat at the biggest and best conferences coming your way soon 


WebGL. The open source framework 
has now reached version 3. There is 
also a Phaser CE ‘a community-lead 
continuation of the Phaser 2 codebase 
and is hosted on its own repo’. 


sgl 15. ii Bieweremaria ema 


THE BIGGEST REACT 
-ONFERENCE WORLDWIDI 


~NEW YORK rome Uo, 
METROPOLITAN Fol CHELSEA 


25 - 27 APRIL 2018 
fa fA 


An Event Apart 
bit.ly/2oeUtlU 

Set in Seattle this event offers 

three days of design, code and 
content with a swathe of great 
well-known speakers. 
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React 
Amsterdam 


react.amsterdam 

The biggest React conference 
in the world. Guess you better 
get your ticket now. 


resources 


NG Conf 


ng-conf.org 


Workshops and speakers all with 


a love of code. If you want to 
learn about Angular then this 
conference is for you. 


Codestock 2018 


codestock.org 
A two-day event for technology 


and information exchange. 
Created by the community, 
for the community. 


Generate NY 
bit.ly/2ksb9YY 

A three-day event consisting 
of a day of workshops followed 
by a two-day, single-track 
conference. Be there. 


Header 
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Developing 


developer skills for Al 


Todd Anglin of Progress suggests devs should be building Al into everything 


t would not be a surprise to say that Al is everywhere these cays. From the fantastic to the 
mundane, everything from manufacturing to healthcare is being earmarked for 
transformation with the technology. This potential for Al to not only transform businesses 
but replace simple tasks means that every developer should be looking at how to build the 
technology in to everything they code. If we are to build a cognitive-first future, then it will 
be essential to be at the forefront of this technology, constantly looking for ways to innovate. 

But what does this mean for the everyday developer? The biggest myth of Al is that it will take 
over the world by itself. TArough a combination of Hollywood assumptions and general ignorance, 


many people outside of software develooment have the notion that Al will write itself, teach itself and 
then eventually tell all of us what to do. Computers are amplifiers. They can amplify your intelligence. 
Or, they can amplify your lack of it! Al solutions are not programming themselves. They are being 
created in the programming languages that exist today - everything from JavaScript to Python to 
C++ - by the developers that exist today. We're not at the point yet where we can rely on Al to author 
software, nor will we reach that point anytime soon. Whilst mundane coding tasks may increasingly 
become the domain of smarter tools and Al, development jobs and the presence of software 
engineers will still be essential to drive innovation. 

However, that’s not to say that new skills are not needed. As with all develooment, a willingness to 
constantly learn and evolve is needed. In order for businesses and projects to avoid falling behind 
their competition, developers need to begin shifting mind-sets to understand how they can leverage 
increasingly capable machines to change the way they design software. Al and an increasingly wide 
array of off-the-shelf cognitive services demands that we challenge traditional patterns that have 
largely governed software development for at least the last 20 years. This is the biggest fundamental 
shift in software design since the Internet became a pervasive force in the ‘90s. 

So what’s needed to stay ahead of the machines? Many of the skills needed to prepare for this 
future are the same required to remain competitive today. There is not a magic programming 
language or approach that will work for everyone. Perhaps the biggest change needed is that of the 
developer mind-set. Conventional thinking towards software development requires that all possible 
; — inputs and outputs be anticipated and designed. With Al, developers can create software that learns 
Todd Anglin and is capable of handling unexpected inputs. It will take time for developers to fully realise the 


VP of Product at Progress potential of this mind-set change. 
progress.com Another key skill for developers to acquire is a deeper understanding of the different components 


that make up “Al”. Courses are available to help with this, introducing concepts such as computer 

a een ee ee] vision, natural language processing, conversational bots, robotics and machine learning. Interestingly, 
delving into philosophy and psychology may also be essential for developers in the future. The 
importance of building a moral code in to the software itself is rapidly becoming more than a 
Hollywood cliche. 


6G There 1S not a Additionally, for those looking to move into Al, or specifically machine learning, spending extra 
magic programming time learning the leading frameworks that are serving as the building blocks of Al would be a great 


idea. TensorFlow and Spark are two good examples of the frameworks underpinning many of 


language OF APPTOACH, |. toaays ai solutions ana Ps 
th t : ll k f As has always been the case, existing educational establishments are always evolving to keep up 
a W1 WOL Or with the latest trends in developing. We are going to see more and more introductory courses to Al 
CVeryYOnNe 99 being launched that will help teach the basics to everyone. For those wanting to specialise, there 
exists a number of resources online that will help delve further into the specific components. 
We are just scratching the surface with what can be achieved through the introduction of Al. It’s 
hard to fathom what will be possible in the next three to five years. From the ability to discover new 


life-saving drugs in healthcare to simply predicting a breakdown on a production line, the limits will 
be bound only by imagination and our ability as developers to find new ways to leverage these. 
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webki 


6 stencil 


Discover the must-try resources that 
Will make your site a better place 


The magical, reusable web 
component compiler 


GET STARTED LEARN MORE 


* Watch launch video 


Stencil 


stenciljs.com 
Stencil, built by the lonic framework 


uetify J 


oo oO 


team, describes itself as ‘The magical, 

reusable web component compiler’. So 

what does it do? It is a compiler that Vuetify Placeholder image generator | Hygen 

generates Web Components, more vuetifyjs.com/en/ bendera.github.io/placeholder/ hygen.io 

specifically, Custom Elements. This There is a clue in the name. Vuetify Need placeholder images, but don’t Describes itself as the ‘The scalable 
means that Stencil-generated brings together the power of Vue.js have an image editor to hand? Get code generator that saves you time’. 
components can be used witha and Material Design. Includes eight Online, choose size, colour and format, Want to know more? Then head over 
framework of choice, or by itself. pre-made vue-cli templates. then download. Simple. to the website. 


TOP 5 Codepens 


Get your hands on an impressive collection of code examples 


FLA LEAT 


The Last Icouldnotstop | WebGL Particles | Winds GLSL 


Experience bit.ly/20iv40X bit.ly/2EISBAN bit.ly/2CAF35Y bit.ly/2EIFpgk 

bit.ly/2weqZAH You won't be able to stop Colourful particles join together | A hypnotic swaying collection Liam Egan’s ‘First Attempt at 

A collection of in-sync dancing clicking - once you start and and pull apart before moving of lines, coupled with subtle Raymarching a Tunnel’ is simply 
robots. Spoil the equilibrium by the shapes start multiplying, across the screen. Much like a shadows, bring a wave of calm mesmerising. Interact to see 
interacting with your mouse. time will fly by. virtual lava lamp. over the viewer. more of the tunnel. 
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Reader survey 


a } The JavaScript 


VASCRIPT Handbook 
TER i 


youll receive a digital copy of 
ee ie importa noe amining The JavaScript Handbook 
ee aa as a thank you for 
your feedback. 


TIGAL 
PROESTS 


FREE DIGITAL EDITION! 


Complete our reader survey at 
; | 
http://bit.ly/2BtaLmR 
Each and every issue, we do our best to create a 
magazine that you love to read, and were always 
looking for ways to make it even better. age 
again, we'd like your help in 
improving Web Designer 
magazine, and all you 
need to do is answer some | 
very quick questions 
about yourself - we're 


really looking forward to 
hearina from you. 
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ubscribe and save 20% 


Every issue, delivered straight to your door 


Never miss an issue Delivered to your home Get the biggest savings 
13 issues a year, and you'll be Free delivery of every issue, Get your favourite magazine for 
sure to get every single one direct to your doorstep less by ordering direct 


What our readers are saying about us... 


“I’ve been a reader of Web Designer “Love the latest magazine that 


5 : “My favourite magazine!!!” 
Magazine since the early days.” | purchased today” 


@eduardomutrillo via Twitter 


@sixrevisions via Twitter @navigation_web via Twitter 
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#54BCE1 #C3DE21 


#FFE72C #DB1119 


COOKING OR NOT? 


SCANFISK 
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1234567890 


Above 


Sequel Pro Regular by Philip Trautmann is a Sans Serif font 


EN 
CONTACT 


designed for use on headlines as employed here. 


abcABC 
1234567890 


The Helvetica Neue font by Edouard Hoffman and Max 
Miedinger for LinoType appears in Condensed Bold. 
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Above 
Split into two core sections for raw and ready-made cooking options, the Mr Fisk product range is navigated via rollover images 


wil O2-UK > ; 


Above 


Above 
Blending bold corporate colours with bold fonts, the site employs Equally responsive with mobile browsers, the site reformats 


simple layouts to present punchy imagery on all devices to slim down and deliver the same eye-catching experience 
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Create an interactive mouse- 
controlled parallax image 


Give the impression of depth by using a parallax effect controlled by the user's mouse movements 


1. Initiate HTML 


The first step is to define the HTML document, which 
consists of the HTML container for storing the head and 
body sections. While the head section is primarily 
responsible for loading the external CSS and JavaScript 
resources, the body section will store the content 
elements to be created in step 2 

<!DOCTYPE html> 

<html> 

<head> 

<title>Mouse Scroll</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css” /> 

<script src="code.js"></script> 

</head> 

<body> 

*kk STEP 2 HERE 

</body> 

</html> 


2. Content elements 
The technique will allow any content container using the 
data-parallax’ attribute to display the effect. Each first 
level child element will display with the parallax 
presentation. This example sets three child layers for the 
parallax, but you can add more if you want to. You can 
also add content to these layers such as text or images 
PNG or SVG with transparency will work best. 
<article data-parallax> 
<div></div> 
<div></div> 
<div></div> 
</article> 


3. Parallax container style 
Create a new file called ‘styles.css. The first set of rules 
in this file sets the default size of the parallax container 
and its position mode. It’s important to use relative 
positioning so that the child elements can be placed in 
relation to wherever the container is located. The width 
and height are set to cover the full screen to allow for 
maximum interactivity. 
[data-parallaxl{ 
position: relative; 
width: 10Qvw; 
height: 10Qvh; 
3 


4. Parallax children 
Each of the first level elements inside the data-parallax’ 
container are sized and positioned to appear centrally. 


Along with parents relative positioning, percentage is 
used as the measurement unit, allowing the sizing and 
positioning to be placed in relation to the parallax 
container. For this example, a transparent red 
background is used to demonstrate the effect - you can 
replace this with PNG or SVG image of your choice using 
@background: ur( your image here )”. 
Ldata-parallax] > x{ 
position: absolute; 
width: 5%; 
height: 50%; 
lettin 25%: 
top: 25%; 
border: 1px solid #000; 
background: rgba(255,0,0,.25) 
b 


5. Initiate the JavaScript 
Create a new file called ‘code js. JavaScript will be used 
to control responses to the user’s mouse interactions. We 
dont want the JavaScript to run any of the JavaScript 
code until the page has fully loaded, hence the code 
for steps 6 and 7 placing a function triggered by the 
‘load’ event, which activates when the window has 
completed loading. 

window. addEventListener("load”, function() 


{ 
xxx STEP 6 HERE 


3 


6. Node search 

The first activity of JavaScript to execute immediately 
after the page is ready is to find all of the parallax layers. 
Firstly, the parallax containers are found, followed by their 
children. Each child has an index number applied to 


them under the data-index' attribute. 
var nodes = document. 
querySelectorAl1("[data-parallax]”); 
for(var i=@; i<nodes.length; i++){ 
var children = nodes[i].children; 
for(var n=0; n<children.length; n++){ 
children[n].setAttribute("data-index” , 
n+2) ; 
u 
*kk STEP 7 HERE 


I 


7. Parallax listeners 
The final step is to apply an event listener for any mouse 
movement occurring over the parallax container. Any 
such actions trigger a feature to calculate the new 
positions of the parallax layers based on the mouse 
position and the data-index' attribute defined in step 6 
- resulting in each layer updating at different paces. The 
result of each calculation is applied to the layers via the 
‘style’ attribute. 
nodes[i].addEventListener("mousemove” , 
function(e){ 
var elms = this.children; 
for(var c=0; c<elms.length; ct+){ 
var divisor = parseInt(elms[c]. 
getAttribute("data-index”)); 
var startX = this.offsetWidth/4; 
var startY = this.offsetHeight/8; 
elmsLc].style.left = startX-(((e. 
screenX/divisor)-e.clientX)/3)+"px"; 
elmsLc].style.top = startY-(((e.screenY/ 
divisor)-e.clientY)/3)+" px”; 
3 
ys 
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'S the quality of content. 
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Above Above 
Rift Soft font designed by Mattox Shuler for Fort Foundry Abril Text by José Scaglione and Veronika Buria for 


#O6E2F9 #C5D83F and available on Typekit is used across all <h2> headings. TypeTogether is used in SemiBold on <h3> text. 
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Narrative is changing the game with a powerful economic 
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model that rewards the people creating and facilitalng great 


content with substantial revenue sources to build and sustain 


the netwrork. 
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Above 
The site applies subtle motion animations to stylish illustrative work, using a small palette of flat colour so effectively. 


JOIN 


THE COMMUNITY a 


Interested in Narrative? Join the conversation and sign up for our Narrative updates 


or check out one of our community channels. 


GET NARRATIVE UPDATES 


(®) 


Above 
Without disrupting the flow so necessary to the experience, 
the site reformats to look equally effective on smaller screens. 


Above 
At the end of the Narrative journey, visitors are encouraged to join a 


community conversation by signing up a valid email. 
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Create a visual full 


screen border overlay 


LightBox 
Narrative 


Create a visual overlay for your website that doesn't prevent interaction with the underlying content 


1. Initiate the HTML Document 


The first step is to define the basic structure of the web 
page. This consists of a HTML document container that 
stores a head and body section. While the head section 
is used to load the external CSS file, the body section is 
used to store the page content created in step 2. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Border Body</title> 

<link href="styles.css” rel 


_" 


stylesheet” 
type="text/css” /> 

</head> 

<body> 

xxx STEP 2 HERE 

</body> 

</html> 


2. Create the page content 

With the basic web page structure now in place, the next 
step of the exercise is to define the content to display. To 
allow a full preview of the border effect, we are using a 
series of paragraphs to make sure that the page is able to 
scroll up and down. 


<h2>Title</h2> 

<p>Content...</p> <p>Content...</p> 
<p>Content...</p> <p>Content...</p> 
<p>Content...</p> <p>Content...</p> 
<p>Content...</p> <p>Content...</p> 
<p>Content...</p> <p>Content...</p> 
<p>Content...</p> <p>Content...</p> 
<p>Content...</p> <p>Content...</p> 


3. Border element properties 
Create a new file called “styles.css”. The border is to be 
made using “before” and “after” virtual elements of the 
document's HTML and body containers; providing 
advantages for keeping the HTML clean from 
unnecessary markup. Avoiding repetition, this step 
defines properties shared by the top, bottom, left and 
right border elements. Fixed positioning makes sure that 
the border remains in the same position as the page 
scrolls, while “content” ensures visibility of the virtual 
elements. 

html: :after, html::before, 

body: :after, body: :before 

{ 


content: "”; 


position: fixed; 
background-color: red; 


4. Right border element 
The right part of the border is made from the “after” 
virtual element of the HTML document container. 
Extending from the fixed positioning set in step 3, this 
element is placed in the top right corner. Its size is set to 
one character width and height extending to the full 
height of the screen. 
html: :after{ 
top: Q; 
right: Q; 
width: lem; 
height: 100%; 
3 


5. Left border 


The opposite border element to previous step, the right 
part of the border is made from the HTML container’s 
“before’ virtual element. This time, the “left” attribute is 
used to position the element relative to the left side of the 
screen. The same width, height and vertical positioning 
are applied. 

html: :beforef{ 


top: Q; 

left: Q; 
width: lem; 
height: 100%; 


I 


6. Bottom border element 

With the vertical side elements of the border in place, the 
next step is to initiate the horizontal borders. Using the 
same type of technique, the body container’s “after” 
virtual element is used to create a block that is positioned 
in relation to the bottom left corner of the screen. This 
element is set to be the same height as the width of the 
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Blog Community Press 


vertical borders, along with a width stretching across the 


full screen. 
body: :after{ 
bottom: Q; 
left: Q; 
width: 100%; 
height: lem; 
3 
7. Top border element 


Like with the vertical borders, the top border almost 
identical to the definition of the bottom border. The 
Significant difference is its position being set relative to 
the top of the page. This element will display at the same 
size and height to stretch across the screen from the top 


left corner. 
body: :before{ 
top: Q; 
left: Q; 
width: 100%; 
height: lem; 
3 
8. Content formatting 


To make sure that the border overlay doesn't interfere 
with the main content, a padding of size two characters is 
set to the body. This is more than enough to cover the 1 
character width/height of the border elements. 
Additionally, paragraphs are set with a horizontal margin 
Space to allow for the scrolling to become visible - you 
can leave this out in your real project. 

body{ 

padding: 2em; } 
pt 


margin: 5em @; } 
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Create an interactive pop 
effect for mouse hovering 


Allow icons to indicate ability to respond to mouse clicks using this animated pop effect 


1. Page structure initiation 
The first step is to initiate the HTML web page. This 
consists of the HTML document container that is 
responsible for storing the head and body sections. The 
head section stores non-visible information - in this case 
the document title and a link to load the external CSS 
document. The body section is used to store the visible 
page content created in Step 2. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Hover Pop</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css” /> 

<body> 

*k* STEP 2 HERE 

</head> 

</body> 


2. Body content 
The document body content consists of a <ul> list with 
three list items. The important part is the application of 
the ‘pop' class, which will be used by CSS to find this 
element to apply visual styling. The list items inside this 
list will be the elements that appear with the ‘pop’ effect. 
<ul class="pop”> 
<li></li> 
<li></ lie 
<li></1li> 
</ul> 


3. Presentation rules 
With the HTML now complete, create a new file called 
‘styles.css' to store your visual presentation rules. The first 
rule sets elements using the ‘pop class to have a margin 
of ten characters on all sides. This will position all of its 
child items with a visible space away from any other 
page content. 

. popt{ 

margin: 10em; 


i 


4. Pop children 

All first-level children inside the ‘pop’ class container will 
display as an inline block - giving the advantage of text 
flow positioning combined with the ability to set size and 
padding. This example uses a blue background colour, 
but you could also apply an image to display using 
‘background: url( image filename ). 

B .pop > *{ 

display: inline-block; 
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width: 5em; 

height: 5em; 

background: blue; 
} 


5. Pop animation application 
With the visual presentation of the items now defined, the 
next step is to apply an animation when their state 
changes to ‘hover. Two pieces of information are used for 
this - the animation name and the duration that the 
animation will last. The name of the animation matches 
the animation name defined in the next step. 
.pop > *x:hover{ 
animation-name: popAnim; 
animation-duration: 1s; 


I 


6. Animation definition 

The ‘pop’ animation referenced in the previous step 
needs to be defined using the @keyframes animation 
feature. This step sets the presentation adjustments at 
specific parts of the animation - indicated by the 
percentage. A scale transform is used to animate 


elements from their original size at Zero per cent, to a 
half size bigger at 50 per cent of the animation. The 
animation concludes by returning the element to its 
original size. 
@keyframes popAnim { 
@% {transform: scale(1);} 
50% {transform: scale(1.5)} 
100% {transform: scale(1);} 
} 


7. Other stuff 


You can apply styling for other elements on the page 
that affect the presentation of ‘pop elements. Where you 
are aiming to make maximum use of the screen, you 
may want to eliminate any page border spacing. This is 
achieved by taking out the default padding and margin 
applied to the page document and border. 


body, html{ 
display: block; 
padding: Q; 
margin: Q; 
min-height: 10Qvh; 
} 
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 - 
t wouldn’t be too unfair to say that 
although an abundance of creative 
~ I care goes into most web projects, 
they don't often start solely as a 
Calling. In these pages we typically 
profile projects that are 
_ predominantly commercially driven, 
even if they represent admirable 
non-profit pursuits or charitable 
causes. Very rare then that we have 
the chance to examine not a vanity 
project, but more of a mission 
liberated from the typical 
client-agency paradigm. One Last 
Beat is a totally solo effort that 
scooped FWA’s FOTD and FOTM 
in January along with Site Of The 
Day picks for Awwwartds and the 
CSS Design Awards. The man 
behind it is interactive 
developer Hector Monerris, now 
operating as a freelancer 
. focusing on WebGL-powered 
frontend work, who drew on 
some 15 years of agency 
intern experience to strike 
out alone. “One Last Beat 
tells the story of a regular 
guy who tries to give his 
life a meaning just a few 
seconds before dying,” 
Héctor begins. “Your 
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A DIFFERENT DRUM 


Even before One Last Beat’s creator Hector 
Monerris dreamed up the germ of its idea 
during his train commutes, he felt a creative 
calling. In seeing what others were doing with 
web-based storytelling, the inspiration was 
already in place even if the theme needed work. 
“It had been a very long time since | did a less 
technical and more creative project, so | needed 
to do something. Then | watched an amazing 
work by AATOAA, called Way to Go (http://a- 
way-to-go.com), which was an online immersive 
experience far beyond anything else | had seen. 
Plus its not a commercial project and does not 
require anything from the user - it just exists. | 
definitely wanted to create something like that, 
but with my resources and my modest style. The 
only problem being that initially | did not have a 
Story to tell.” To find that impetus, Monerris did 
what most writers in any medium espouse - the 
notion of looking within one’s self for 
inspiration. If he could happen upon a narrative 
thread that moved him enough, then it could 
surely be enough to power the project and 
resonate with others. “Some time ago, | was at a 
time of my life where | needed a radical change, 
but | was not ready to face it,” says Monerris. 
“And | found myself repeating this thought over 
and over again, the thought that a second 
before dying there will be regrets for not having 
been brave enough to do things. That is how the 
One Last Beat idea popped up into my mind and 
| loved it instantly, because | never had the 
chance to do a project exploring a feeling. A 
feeling of mine, something personal.” 
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mission is to make his heart beat to give 
him power to accomplish all his 
expectations.’ It’s an idea that seems 
biographical, albeit it allegorically, to his 
own ambitions for the One Last Beat 
concept, while ironically hinting at the 
multiple powers Hector himself has drawn 
on. Professional skills in 2D animation and 
web design are joined by hobbies 
Spanning music, sound, movies and 
photography. As an interactive story, One 
Last Beat harnesses all that creative 
enthusiasm to deliver everything you 
watch or hear. He wrote the script, shot his 
own acting performances, composed the 
soundtrack, edited the movie and then 
coded the site itself. The only bit he 
delegated was the driving and moral 
Support duties - gratefully received from 
mum and dad. “It is not a project for 
everyone, Monerris concedes. “It has an 
amateurish aesthetic style and the 
Storyline deals with a character who has to 
face death and failure, in complete 
loneliness. But everything is told in a wild, 
funny and optimistic way.” Doing our best 
to follow suit, we gleefully accepted the 
invitation to chronicle what made the 
talented maverick tick during One Last 
Beat’s rollout. 


ON YOUR TONE 


The genesis of the project dates back to 
August 2016 when, as a confessed train 
lover, Hector would dream up ideas during 
trips to Valencia. It was then that this 
fiercely personal story idea took early 
form, quickly becoming a narrative our 
hero needed to tell. “Immediately, | started 
to work on the project during my free 
time, Hector tells us. “Soon | realised that 
working on it some weekends and a 
couple of hours a day would make the 
production of the project endless.” As a 
Studio employee at that time, it was a 
hugely bold move to quit and go out ona 
limb for a dream, supplemented by the 
odd small commercial commission here 
and there. “| had worked on Godzilla-sized 
projects for big brands before,” he says. 
“And since school, | have been frequently 
producing small personal projects on my 
own, but the production of One Last Beat 
took me by surprise. Putting it all together 
was stupidly complex maybe due to my 
lack of experience in the ‘producer role. 
Initially | thought | could use a linear 
approach of script, production, video, 
sound, music, to coding and then end. But 
early on | discovered that this was not 


possible.” So much of the work would 
prove to overlap, and in the early stages 
Monerris would need to do time- 
consuming testing and proof of concept 
work just to get going. Pre-production 
hours were consumed by honing 
Storyline, not to craft a masterpiece he 
says, but just reach a consistent tone. “| 
Started modelling the whole thing from 
diverse angles, Monerris says. “After the 
first rough draft of the script was finished, | 
made some software prototypes, also 
some tests on the props and a first 
approach to the music score. When all 
those tests were completed, | got back to 
the scriot and make adjustments and 
changes using the conclusions.” 


TECH CHECKING 


Very much an organic and iterative 
process, Monerris recalls filling a notebook 
with ideas as everything began to take 
Shape. He would also make numerous 


script rewrites and tweaks during the 
realisation that a story around loneliness 
would benefit by him doing everything on 
his own. It was important to acknowledge 
his skill limitations and engineer around 
them while leaning on his core 
background. “Being mainly a developer 
influenced my workflow,’ he says. “| 
created some helpful tools and scripts to 
assist myself. In that way, | could spend 
more time developing rather than, for 
example, animating. Also that preference 
towards developing initially made it seem 
attractive to face the project in a more 
technical way. | was going to use VR 360° 
video and a sort of web sockets plus 
second screen combination as controller 
for the interactions.” Although this 
appealed to his technical ambitions, 
Hector worried it would detract from the 
story and decided to give that the 
emphasis, sacrificing some impressive 
work in the process. “It was a painful part 


of the process to remove some of my 
favourite ideas. Especially those in which | 
had spent time prototyping them, or the 
ones already developed and completely 
finished. Surprisingly, some aspects almost 
Started to look too good and | had to 
make them look worse to maintain the 
average aesthetics of the project.” Taking 
inspiration from movie director Darren 
Aronofsky’s philosophy about a film not 
being done until a favourite shot is cut, he 
knew to simplify the vision and chase the 
essential. So difficult first moments in 
Storyboarding and practically achieving 
the shoot would not get him down, 
whether figuring out how to film himself 
wearing a cardboard pinata head on little 
more than a mobile phone. “| neglected 
the white balance for several shots and 
the colour was severely different from one 
take to another,’ he explained. “Not a big 
deal for a regular user, but | am colour 
blind. Luckily, | found some tutorials about 


design diary 


Creator HECTOR MONERRIS sums up the 
key reason why the One Last Beat project 
occupies a Special place in his heart. 


A DIFFERENT DRUM 


“| made the project because | 
wanted to do it, for fun and 
regardless of external opinions. 
When | finished it, | thought that 
nobody would care about it, but 
it has gone in the opposite 
direction. This has made it my 
most successful project by far 
and so my highlight is knowing 
people over the world, some 
who barely understand English 
are enjoying it. Wow!” 
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Who lies behind the 
mask and shades? 


A DIFFERENT DRUM 


“| would love to see the faces of people who 
watch the story for the first time,’ muses 
Hector when questioned about gauging the 
audience response and where that might lead. 
“Just to know if they are laughing with the 
things that | find funny. It would be nice to 
know if they are touched by something, or if 
they close the browser during the first minute 
instead. But this is not possible of course and | 
just have opinions from people who kindly 
shared it with me.” So has that kind of 
encouragement given Monerris a hunger for 
more? Certainly it’s clear that the warm 
reception and his own personal pride 
continues to yield palpable creative 
Satisfaction when he speaks about it. Might we 
see a sequel to the project one day or is it time 
to move on to pastures new? “I’m not planning 
to release another episode of One Last Beat as 
it is a complete story by itself, but for sure | will 
try to do more personal projects in the future,” 
he said. “Plus maybe with this one in my 
portfolio, studios or companies can call me to 
do collaborations in projects more focused on 
storytelling, being the ones that interest me 
the most... or projects with monsters! Yes, if 
somebody has a project with monsters, call me 
please, | am on it. | can perform the monster 
role and write some code.” 


a technique that allowed me to do the 
colour matching using grey scale and 
numeric values. The result was far from 
perfect but it did the trick.” 


DOODLE BUGS 


Monerris always preferred the visual 
frontend design to almost be invisible to 
Support and not distract from the story. 
Having attempted more “polished” options 
without satisfaction, it was clear the GUI 
would require the same organic, 
improvised and handmade feeling of the 
film. “| didn't want to doodle faces for 
12,000 frames and then realise that | 
didnt like the width or the colour of the 
Stoke and have to redo them,’ he says. 
“The solution seemed to be to create a 
doodle animation tool and after building 
that in Node, HTML5 and JavaScript, | 
animated and rendered to PNG sequences 
all the characters faces in less than three 
days. Liking how the doodles looked, | 
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decided to do the main titles for the site 
with the same technique. But instead of 
generating heavy weighted PNG 
sequences, | isolated the renderer from 
the animation tool and adapted it to 
render the titles in real time.” Limiting the 
frame rate to 30 over 6Ofps due to the 
titles appearing “too wiggly’ for Hector’s 
taste, the parameters could at least be 
animated using GSAP to achieve the 
unique transitions and effects. The main 
worry was ensuring it would all work on 
mobile without going too crazy to cover 
older devices or try too hard to replicate 
an undoubtedly better experience on 
desktop. “| needed to be sure that a 
mid-end smartphone or tablet with a nice 
Wi-Fi connection could handle everything 
in a decent way,’ Monerris says. “Also 
remembering that there are some 
desktops that support touch events, and 
some mobile devices with physical 
keyboards - so everything is Supported at 


the same time.” With the Flash era an 
increasingly distant memory, Monerris 
knew that platforms and browsers would 
deal with the site's video in different ways: 
“Touch devices have weird behaviours 
because of data usage policies and 
Standardisation just isn't there. You can 
use blobs and other techniques to control 
the loading, but | decided to let it go and 
let every device or browser to handle the 
video its Own Way.’ 


VIDEO NIGETY 


Hector’s practical approach to serving the 
site was therefore very bandwidth 
conscious, opening with a preload of the 
GUI and all the JavaScript. Everything is 
optimised, minified and gzipped, with the 
first preload disguised by the headphone 
recommendation message before all the 
bigger assets are initialised only when the 
user presses the Start button. “All 
interaction assets are loaded during this 


second preload, he explains. “I did it that 
way because | did not want the video 
having to compete with other assets for 
bandwidth. During the interactions the 
video stops loading itself, depending on 
the browser, but it has some seconds 
buffered so it can start right after the 
interaction end and starts preloading 
again.’ Hosting the assets on the Google 
Cloud Platform, Monerris explains the 
choice as a “bandwidth beast” offering 
great service that boasts an easy learning 
curve. He continues: “Plus I’m able to 
choose the right compression and quality 
for the video, something not achievable 
by using Vimeo or YouTube players.’ 
Speaking there of money, Hector can only 
shrug at any notions of marketing budgets 
Or campaigns for publicising One Last 
Beat. Always a non-profit endeavour from 
day zero, the project remains a very 
personal journey and story he needed to 
tell without investing funds into promotion. 


“If One Last Beat was a regular short film 
instead of an interactive story wrapped 
into a website, the way to go would have 
been through movie festivals,” he told us. 
“So | tried with the online equivalent by 
Submitting the project to the most 
important online award sites for 
consideration and that was really effective. 
Winning the awards it has, made the site 
visible for a wide and specialised audience. 
Luckily, that was the audience that could 
and remains best to appreciate it.” 


TOUCHING PERFORMANCE 


Thanks to those awards and 
recommendations from an impressed 
audience, the site has enjoyed more than 
30,000 views and counting. Sure, in an 
age of multi-million grossing viral vids of 
people falling down holes, such numbers 
are smaller fry, but it’s enough for the 
creator to feel heartened. His own 
acknowledgement of One Last Beat’s 


leftfield “Weirdness” and treatment of 
uncomfortable issues always meant it 
wouldnt resonate with everyone. Monerris 
concludes: “| guess that there is a massive 
audience who is not attracted to the story 
because of various factors, which is totally 
understandable. But then, there is another 
group who is connecting in a very 
personal way, and they are really 
enthusiastic about it. What | am enjoying 
the most is getting feedback from people 
who find the project interesting, touching 
or inspiring. That encourages me to do 
more. | am also proud that almost 
everyone is enjoying both the interactive 
part and the movie as a unique piece. 
They talk about the story and | would 
have been very disappointed if the 
reviews had purely focused on the tech 
part. But for me, the big success of One 
Last Beat is just its existence. Having been 
able to finish it, while staying true to the 
idea, is the best reward.” 
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A DIFFERENT DRUM 


A regular guy trying 
to give his life a 
meaning 
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HOW TO MAKE THE SWITCH TO 


AFFINITY APPS 


Why one web design agency decided to move over to Affinity 


e Create Digital is made up of 

highly experienced web 

developers and graphic 

designers fuelled by a 
genuine passion for technology. Until 
recently, Adobe Illustrator was our go-to 
application for graphic design - indeed, it 
has been a mainstay for many designers 
since its introduction in 1987 While a 
plethora of competing products have 
been introduced since, most have fallen 
by the wayside and allowed Adobe to 
maintain its domination of the market. 

Affinity has risen as Adobe's newest - 

and possibly fiercest - challenger yet, 
drawing parallels to two of Adobe's 
flagship applications: Illustrator and 
Photoshop. Affinity Designer is a 
professional vector graphics app with 
power to spare. Affinity Photo is a 


dedicated image editing application 
boasting a wealth of highly refined tools 
for image readjustment and 
enhancement. 

Affinity Designer and Affinity Photo are 
available for a one-off fee of £48.99 each, 
for Mac and Windows, which represents a 
more cost-effective solution than 
subscription-based plans. However, that’s 
not to say you'll be getting a sub-standard 
product. 

Affinity’s improbable success hasn't 
gone unnoticed, with Apple awarding 
Affinity with its highly coveted Design 
Award in June 2015, unveiling Affinity 
Photo for iPad onstage at WWDC last year, 
and then naming it App of the Year. 

We Create Digital first started 
considering moving away from Adobe as 
their team began to expand. Ultimately, 


ikea Go 
‘a ee oe OUrCe ame af bang airy 


Sr |) tw wee io meceve go bootings, 
oa ma Macher IO Aen her orcormssicn 
ov Gea (uarenees io sere thet musical news, 


Wamtivimeniiad on tl 


What was instrumental in their decision 
was a belief that Affinity Designer is better 
geared towards the needs of the modern 
web designer. In this article we'll explore 
why they made the switch, and how. 


Feature focus 
Affinity Designer is a high-end graphics 
software application that has been created 
for use by professional designers. It is 
equipped with most of the functionality 
seen in its big-name rivals, plus a whole 
host of new features and capabilities. 
Moreover, it is fast expanding its range of 
tools and feature set with regular updates 
- inviting users to submit new feature 
requests openly on its forum. 

Affinity has shown an astute awareness 
of its audience. A basic example of this 
would be how users can choose from a 
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range of screen resolution presets based 
on the dimensions of popular devices. 
Furthermore, Affinity has clearly been 
developed with the aim of supporting a 
streamlined workflow. Customisable layer 
effects enable designers to effortlessly 
refine elements of their design, and these 
adjustment layers can be saved as 
templates for future use. 

These features really shone in a recent 
project for Musician Go, a central resource 
for musicians. WCD was responsible for 
delivering all aspects of branding, design, 
and development - building a truly 
bespoke platform entirely from scratch. 
The asset management panel provides 
easy access to design elements that crop 
up repeatedly in projects, a feature we 
made frequent use of when designing 
Musician Go. 

At WCD we are sticklers for detail and 
accuracy, which is why we love Affinity’s 
advanced snapping and grid options. 
Affinity features zooming capabilities of 
more than 1,000,000% (that’s right, one 
million percent!), meaning we can be as 
precise as we want. It’s also geared up 
specifically for working with both vectors 


and bitmap images within the same 
document, without having to switch 
between programmes. 

Affinity offers advanced image 
adjustment options, which came in handy 
when we were asked to design a website 
for a new restaurant called Felloack. The 
aim was to showcase the incredible 
landscape surrounding the restaurant, and 
to capture the brand’s passion for food 
with vibrant photography. 


Traditional beers brewed 
the traditional way 
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Both Affinity Photo and 
Designer are ideal for the 
modern web designer 
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The software has replaced 
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Fellpack roures 


In Affinity Designer we were able to 
overlay text without impairing readability 
and with only minimal desaturation to 
photos. The result is a website that creates 
an instant impression on its visitors and 
captures the vision of Fellpack. 


Photoshop and Illustrator for 


the agency 


Making the switch 

Our transition was aided by Affinity’s 
Support for PSD and Al files - meaning 
that we were able to work using our 
existing source files with ease. Similarly, its 
wide range of file Support facilitates our 
collaborations with external designers and 
agencies. 

Affinity’s slick, accessible and highly 
intuitive interface mean users need little 
time to bring themselves up to speed with 
the nuanced differences between Affinity 
and Adobe. This also makes Affinity an 
attractive option for beginners as well as 
seasoned professionals. 

With a free trial available, we’d strongly 
advise you to consider giving Affinity a 
chance. It’s been two years since we 
Switched to using Affinity, and we haven't 
looked back. 

@ affinity.serif.com 
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Passion coupled with technical prowess and a deep 
understanding of communications, has ensured 
that Spring/Summer has become a sought-after 

agency for some of the world’s top brands 


ike many designers, Pelle 

Martin had a varied career 

before starting Spring/Summer. 

Working at a Danish agency for 
a decade as executive creative director, 
Pelle also worked in New York, which 
coincided with freelance work where he 
worked as | AM PELLE. Working with 
international clients designing websites 
for Adidas by Stella McCartney, Victoria’s 
Secret, HTC and other great companies. 

At the end of 2012 Pelle and Jeppe 
Kruse - who would later become a 
partner in Spring/Summer - had landed 
a few larger clients, including F.C. 
Copenhagen, legendary jeweller Georg 
Jensen and cable network YouSee. 
These led Pelle to start Spring/Summer 
as he could see that his business needed 
a firm footing in order to grow and 
connect with new business partners. 
Pelle had always thought that his 

freelancing would eventually become an 
agency. His ambition was always that his 
agency would have an international 
focus. Pelle initially hired Frederik Dufva 
( Account Director) to support the client 
accounts that the business had already 
secured. Also, Pelle hired Sander 
Kuypers (Art Director) from the 
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Netherlands and Henrik Dahlqvist (Art 
Director) from Sweden to give hima 
solid foundation onto which he could 
build Spring/Summer, which has just 
celebrated its fifth birthday. 

And having different nationalities is 
definitely an asset. “At Spring/Summer 
we are a mix of nationalities, but 
fundamentally, we create our designs 
using the same set of rules that the 
great Danish furniture designers used: 
Function over form, which again gives 
the most beautiful form in return,” says 
Pelle. “We are not slaves to the past, 
which means we create bespoke 
solutions for our clients. We take pride 
in trying to create trends rather than 
following them, although that does 
happen also.” 

Having developed his freelance 
business to the point where it needed to 
grow, Pelle started to think about what 
he would call his new business. “Spring/ 
Summer is a term for a particular season 
in the world of fashion and the name of 
the agency dates back a little further 
than the company,” Pelle explains. 

“We were four freelancers who landed 
a client back in 2011 and we actually 
formed a company back then under & 
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the same name. That company closed 
down, but | asked if | could use the name 
for my new agency. The initial thought 
was to change the name every six 
months, so we would change to Fall/ 
Winter during the colder months - of 
course that was a terrible idea, but we 
still use that URL for all testing purposes. 
Both URLs were available, but we have 
always been too cheap to buy the .com, 
and the price of that keeps going up. Our 
favourite time of year is the spring and 
the summer, and we try to live that 
feeling all year around.” 

With a background in website design, 
it’s no surprise that Spring/Summer’s 
website has been a focus from day one. 
Pelle continues: “Having a great agency 
site is super important for us. For many 
of our clients it’s an early stepping stone 
on the way to getting to know us, and 
seeing our work, plus the general level 
of effort we have put into our site usually 
creates trust and a desire to know more 
from the client’s side. 


“We are at a time where 
we, like in the Adobe 
Flash days, see a lot of 
animation which we use 
alot as well. It is 
however, an area where 
this can easily become 
overused — you have to 
strike a balance. Ideally 
you use animations to 
aid the user — not waste 
their time” 


PELLE MARTIN 
Founding Partner and 
Creative Director 
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“We have built a very solid platform 
for ourselves where we can design new 
sections by simply configuring modules 
in the CMS. We can get extremely 
creative with the pages that we build, 
and this makes the site a bit more future- 
proof and very fast to update. We put 
quite a lot of effort into making the cases 
for the site, so it becomes more of a 
content task.” 

Gaining the right kind of clients is vital 
for all agencies. Spring/Summer already 
had a great pedigree, as Pelle had been 
working with high-profile international 
clients for some years. This gave his 
agency a foundation of clients to build 
onto and expand. Ultimately though, 
Pelle feels it’s their standing in the 
marketplace that makes their agency 
a magnet for brands. 

“We live by our reputation and word 
of mouth, as we don't do any direct sales 
activities. We do try to get good PR 
when possible and we have succeeded 
in winning a good quantity of awards, 
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which helps as well. We do get invited to 
pitches, and last year we won most of 
the pitches we took part in, but we 
generally think that the work we have 
done for other clients should be enough 
to convince the potential client of our 
worth. If the potential in the project is 
not big enough, we cannot make a visual 
pitch. This year going forward we will 
focus more on both expanding our 
relationships with existing clients and 
expanding our overall client base to 
hopefully grow our turnover.” 

With such a diverse range of clients, 
Pelle explains his approach when 
deciding on which clients to work with: 
“Luckily most jobs that land on our table 
are, in some way, a good fit for us. 
Clients do their research and they 
choose us ona basis of our portfolio 
- most of the time. Or you can swap it 
around and say that if a potential client 
has found us through typing ‘digital 
agency’ into Google, then we know that 
the process will be much harder, and we 


“Being in a small 
country like 
Denmark, we 
sometimes get 
potential clients 
that think we can 
make things for 
no money” 


will need to do a lot more work in 
convincing the client of what makes us 
special. Being in a small country like 
Denmark, we sometimes get potential 
clients that think we can make things for 
no money when, in fact, Denmark is one 
of the more expensive countries in the 
world. Luckily this is not the norm and at 
the moment we have dream clients 
knocking at our doors.” 

How an agency defines its design 
sense and how this is expressed through 
the work it completes, can often speak 
volumes about the agency itself, and 
its founders. “We have a few ethos or 
trademarks, and they do not necessarily 
support each other,’ explains Pelle. 

“We like to do the very focussed 
communication pieces, but also the 
more complex digital products. One 
thing that covers them all is that we 
focus on giving a good and tailored 
user experience each time we embark 
ona project. 

“However, a few projects that define 
Spring/Summer include Beagle for 
Podio where we made a combination 
of good storytelling, a very coherent 
visual language, beautiful animations, 
no-compromise responsiveness and a 
very fluid feeling for them. And the 
design and UX we made for the Uniqlo 
Recipe app, which has proven very 
timeless. We thought through how the 
circles of the plates, forming loaders, 
cooking timer and image crops, and the 
colours of the app adapt to the clothing 
of the chefs, which again matches the 
courses that they cook. Scandinavian 
and Japanese minimalism and 
functionalism fusion.” 

The workflow that a design agency 
adopts can often be defined by its 
founders. Pelle explains his approach: 
“We have invented our own process 
model that we apply to all our work. It’s 
a sprint-based physical card exercise 
that helps us scope and estimate and 


Above Jenny working 
late and deep in 
concentration. We 
don’t know what she’s 
listening to, but it 
seems to be helping 


make everybody involved in 
the project very early on and 
throughout the process. 

“This is an evolution of ways of 
working that we have tried applying 
over the years, which has now taken 
form as ‘The Involver’.” Pelle believes 
he and his team spent too much time 
looking at screens and not physically 
collaborating with each other. The 
Involver, as its name suggests, 
enables everyone to come together 
to communicate their ideas. Using 
physical coloured cards, a project’s 
workflow can be mapped out, as it 
evolves in the minds of everyone 
working towards a common goal. 

“Working digitally, we are aware of 
how a lot of good ideas today come 
through technology,’ says Pelle. 

“For us, it was necessary to figure 

out a way to integrate our 
technological competencies much 
earlier in our project development 

- for instance, by interacting with > 
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Stine Goya 
stinegoya.com 


We were asked by fashion 
brand Stine Goya to break the 
rules for what you can do with 
Shopify. They were already on 
the platform and very happy 
with the commerce part, but 
felt their digital look and feel 
was holding them back. 

To begin their new design, 
we created various layout 
experiments in code and After 
Effects to begin our focus onto 
their brand DNA. Parts of the 
Shopify developer experience 
feel quite locked down 
(Shopify, hope you’re reading 
this!), especially when it comes 
to creating more dynamic 
pages where creative brand 
content gets mixed with 
products. This is where we 
had to come up with some 
alternative strategies, but we 
managed to find a way. 

Typically for us, a lot of 
people contributed their 
specialist skills to this project. 
Two designers, a motion 
designer and a UX specialist 
initially worked on different 
aspects of the user experience, 
and the development task was 
split into two, with one dev 
handling mark-up, layout and 
Shopify backend setup while 
the other focused on effects 
and animation. Last, but 
certainly not least, a project 
manager made sure 
everything came together 
at the right time. 

The end result launched just 
before Christmas. It’s a 
fullscreen feeling with a vibe 
of playfulness and a lot of 
colours that get applied in 
different ways, layered 
throughout the experience. 
We're very happy with it and 
hope we'll get more chances to 
wrestle with Shopify in 2018. 
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niglo Recipe app 


One of the biggest global 
clothing brands, Uniqlo has 
always opted for new ways of 
approaching its marketing. 
Continuing its tradition of 
releasing quirky ‘life tools’ 
apps as part its marketing 
activity, the Japanese brand 
set out to create a recipe app 
for Android and iOS. It would 
be an app that fused food 
and style by highlighting 

the wonderful colours and 
textures that tie them 
together with Uniglo’s 
LifeWear philosophy. 

We created a part- 
Scandinavian, part-Japanese 
inspired user experience, 
focused on 24 dishes made by 
six chefs, with each chef 
dressed and photographed in 
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Uniqlo LifeWear which 
complemented the colours of 
the dishes. Each chef's look 
can be purchased easily 
through the app. Original 
music, food and style combine 
perfectly in a timer featuring 
cooking sounds, and the timer 
can be used on its own or as 
part of every recipe. 

We defined the user 
experience in stages. First, at 
the concept level, all screens 
were sketched out on an iPad 
using Fiftythree’s Paper app. 
This became the foundation 
for the app. We then defined 
look and layout for the entire 
app. The designs and 
navigation principles were 
embodied in many prototypes 
and underwent many changes 
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before we settled on the 
direction you see. 

Later we also directed 
photography and produced all 
the image assets for the app, 
before handing everything 
over to a team of remote 
developers. In total, three 
designers and a UX specialist 
contributed from the Spring/ 
Summer side. 

The Uniqlo Recipe app came 
out for mobile and tablet and 
was named Apple's ‘Best of 
2013’ in nine countries, 
including the US. It ranked 
number one in the App Store 
in 29 countries including the 
US and, until recently, was 
featured by Apple asa 
highlighted iOS app on 
apple.com. 


Top left Visually stunning, 
the app also has practical 
elements that effortlessly 
blend and integrate, 
supporting what people 
love about Uniglo’s 
LifeWear philosophy 


Top right Making an app 
standout in a crowded 
marketplace was a 
challenge Spring/Summer 
more than met with its 
innovative approach 


Left Each component of 
this unique app was 
hand-crafted. Mashing 
Scandinavian, and Japanese 
art and culture results in an 
immersive experience for 
the app’s users 
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the developers even more at the 
beginning of a project. 

“Our larger projects span from 
about five months to maybe ten and 
sometimes include the full production, 
and other times, we work witha 
subcontractor for speciality 
development requirements. A typical 
team could look like this: One Designer 
(UI Design), one Art Director (UI Design 
lead), one Creative Director (Creative 
and Strategic oversight), one Project 
Manager (managing team and client), 
one UX designer (designing interactions 
and full oversight of the sitemap and 
details), one or two Developers 
(advanced frontend and lightweight 
backend coding).” 

Jeppe also comments: “We used to be 
firmly in the Adobe camp but during the 
last few years we've opened up more to 
using the likes of Sketch, Principle, 
Invision and other newer design tools. 
We try to let our designers have a Say in 
how they work and what tools they use. 
When it comes to UI animation we are 
also big fans of Keynote. 

“On our radar right now are CSS Grid 
and Element Queries, which will be 
really interesting to work with. Dynamic 
Typography is also interesting to play 
with, but mostly for fun so far. 

“A lot of the things we continue to 
be hyped about, such as Canvas, are 
actually not that new. On a general 
level, device screens and capabilities 
are much the same as they have been 
for some years, and the interaction 
possibilities and performance of those 
devices haven't changed a lot. We care 
a great deal about little improvements 
that will let us push boundaries and 
achieve better performance in terms 
of loading times, framerates and 
perceived UI feedback.” 

Jeppe also offers his view on the 
current state of design tools: “We don't 
think HTML, CSS and JavaScript will go 
away anytime soon. The myriad number 
of frameworks and build tools continues 
to increase, and some tools will go out 
of fashion as others become popular. 

As an underlying trend, we believe that 
thinking about frontend code in an 
object-oriented way will become more 
popular, or at least deserves to. As an 
example, we often think about 
animation principles and content scaling 
rules in an object-oriented way, which 
makes it all the easier to handle the 
complexity that a really elegant solution 
is always going to have under the hood.” 


“As an underlying trend, 
we believe that thinking 
about frontend code in 
an object-oriented way 
will become more 
popular, or at least 
deserves to. As an 
example, we often 
think about animation 
principles and content 
scaling rules in an 
object-oriented way, 
which makes it all the 
easier to handle the 
complexity that a really 
elegant solution is 
always going to have 
under the hood” 


JEPPE KRUSE 
Director of User 
Experience 


Below Henrik isn't 
normally the shy one. 
The camera seems to 
have made him want 
to hide 
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TIMELINE 


2013 
Spring/Summer is 
formed. We move into 
our first office in an old 
dancing school in 
Norrebro, Copenhagen. 
Employees: 2 


2013 
Our client, 
F.C.Copenhagen, wins 
the Danish football 
championship for the 
tenth time. We pose with 
its mascot Leo. 
Employees: 4 


2014 
After a break-in where 
all our gear is stolen. We 
get a smoke cannon 
installed to make it 
harder for thieves. 
Employees: 7+ 1intern 


2015 
We launch ‘B&O Play X 
Rapha’ and Beagle - 
Better proposals’, two 
of our most award- 
winning projects. 
Employees: 9 + 1intern 


2016 
Great year, big party, lots 
of awards and more good 
people to help us make 
more great work. 
Employees: 10 


2016 
We submit six cases 
to the Creative Circle 
awards, all get nominated 
and we win four circles. 
Employees: 11+ 2 interns 


2017 
We introduce ‘The 
Involver’ - a new way of 
working, scoping, living 
and breathing projects 
at Spring/Summer. 
Employees: 11+ 2 interns 
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“You have to 
strike a balance. 
Ideally you use 
animations to aid 
the user — not 
waste their time” 


As mobile devices continue to 
proliferate, is digital design now a 
mobile-first exercise? “We have a lot of 
clients coming with a request of doing 
‘mobile first’ design,” says Pelle. “That 
often comes from a realisation that the 
conversions they are seeing on mobile 
on their current sites are not up to par 
with desktop, even though their visitor 
counts on mobile are now surpassing 
desktop. This is not necessarily a bad 
thing. It’s reality that the platforms are 
used quite differently and often support 
each other well, and it is very easy to 
draw conclusions on a false basis. From 
a design point of view, it is much harder 
to scale up from mobile than to scale 
down from desktop, and we always 
work with a no-compromise mobile 
approach, but most often start with 
the big screens.” 

Has Spring/Summer identified any 
trends across the design space they are 
keeping an eye on? “At the moment, you 
see so many things that follow trends 
and you can often see these trends in 
the site designs created by many 
agencies,’ Pelle explains. “The ones that 
stand out are the ones that seem very 
Original, but still retain sanity. It is most 
often the ones that simplify or add 
clever functions to behaviours that seem 
locked by conventions. We are ata time 
where we, like in the Adobe Flash days, 
see a lot of animation, which we use a 
lot as well. It is however, an area where 
this can easily become overused - you 
have to strike a balance. Ideally you use 
animations to aid the user - not waste 
their time.” 

Spring/Summer is a small agency, 
which means everyone that works 
there has earned their place. As Pelle 
has ambitions to expand the business, 
what’s he looking for in his next hire? 
“We have had good success with 
hiring in young talent and building 
our business on that, and some of > 
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Seasonal Design 


Simply Chocolate simplychocolate.dk 


Simply Chocolate makes 
chocolate in a simple way 
from natural ingredients. As 
they say, they just add a bit 
of new to the traditional 
formulas to create a modern, 
simple chocolate that still 
Surprises. We created a 
website with eCommerce 
capabilities, so the entire 
world could get a taste. 
Their thirteen chocolate 


big effort to make it feel properties. The chocolate bar 
integrated throughout. The is a layer itself, composed of a 
concept is tied together when bunch of other sub-layers. We 
you finish your checkout and used a 2D canvas library 
you get a little message from called Pixi.js to make it easier 
one of the bars that you have to manage these layers. 
just purchased. Since its launch in 2017, 

In the frontend, most Simply Chocolate has won all 
graphic elements are drawn the awards we have submitted 
into a canvas. Each of these it to, and it has gained quite 


elements is placed on a layer a lot of attention in the 
design community. 


with its own transformation 


bars look visually similar. 
However, unwrapping a 
Simply Chocolate bar is like 
unveiling a surprise. We 
incorporated this sense of 
wonder into the website by 
creating a pattern with the 
ingredients of each bar, 
showing the flavours that 
make the bar unique, while 
enhancing the consistent 
branding across the site. 
The bar itself unwraps as 
you scroll down the page, 
revealing what’s inside. The 
chocolate box sits in a panel 
on the side and follows you 
throughout the experience. 
We created the site by 
using off-the-shelf tools, 
including WordPress and 
WooCommerce. It has a few 
restrictions, but we made a 


those people have now been here five 
years and are, of course, much more 
complete in their skillset than when they 
started out,’ Pelle explains. 

“We look for two major things and | 
would almost go as far as to say, only 
these two things: We look for good 
chemistry and good work. Work does 
not have to be for clients, it can be 
school projects or fake homemade 
stuff, but it needs to be clear what that 
person’s role has been, and it needs to 
knock our socks off. We only take people 
in that already can do great things. The 
chemistry part is hard to quantify but is 
extremely important. We do spend more 
time awake together at the office than 
some of us do with our families, so the 
office also has to be our family!” 

And if you want to work in the digital 
industries, this is the advice Pelle would 
give: “Create a portfolio of fantasy 
projects if needed. | used to try and 
recreate sites that | liked pixel for pixel. 
| wouldn't show it to anybody, but | 
learned the techniques and you need 
that to be able to create original stuff. 

Be inspired by things outside of digital 
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design. Fashion design can show 
tendencies that trickle down to what we 
do after some time. Look at normcore (a 
fashion movement from a few years ago 
and still around) - this non-design 
tendency is now very much alive in 
graphic and digital design in the form 
of brutalism and other stripped styles. 
Philips’ Ambilight TV came with a light 
effect you now see in shadows on Apple 
TV and in tons of designs on Dribbble. 
You can find inspiration in other places. 
Train your eyes to find these things.” 
And what of the future? Pelle explains 
that Spring/Summer will grow, but this 
isn't a priority at the moment. This will 
happen organically, as the work they do 
pushes the business into new areas that 
may mean the business must expand. As 
a design-led agency, the work will 
always come first. Striving to break new 
ground in the digital space is the core of 
what makes Spring/Summer a dynamic 
place to work, and an agency that global 
brands want to partner with. What’s 
next? For Pelle this hasn’t come into 
focus yet. Whatever Spring/Summer 
do, it’s going to be amazing. 
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Above The smooth scrolling effect 
immediately grabs the visitor’s 
attention. This illustrates how 
applying design expertise to 
WordPress can still result in 

an award-winning site 


springsummer.dk 


Founder | Services 


Pelle Martin 


Year founded 


2013 


Current 
employees 


13 


- Digital Concepts 


- Ul & UX Design 


- Creative 
Development 


- Brand design & 
Content creation 


Location 
Copenhagen 
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LAUNCH BEAUTIFUL UMBRACO WEBSITES WITH 


uSkinned 


hatever your organisation, 
you need a great website. 
Creating and maintaining one 
that suits your ever-changing 
needs can be difficult and expensive. 
Thankfully, uSkinned’s starter kits are 
future-proof, adaptable and easy-to-use, SO 
no matter how much your site changes, 
they'll grow with it. And right now, you can 
get 15 percent off of your next uSkinned 
purchase with the code 15OFFCB. Head 
over to http://bit.ly/2F5PxgA for more. 


“uSkinned themes take 
Umbraco CMS to the 


next level” 


Barney Blackhurst 
Ministry of Sound 


uSkinned’s themes are designed with 
users in mind, and make it easy for 
anyone to create a beautiful, professional- 
looking site. Whether youre a web 
designer or developer, marketing 
professional or non-profit volunteer, run 
your own business or work for a digital 
agency, or just want to create an 
exceptional website, uSkinned is the 
perfect solution. 

You need a website that’s flexible and 
can be up and running quickly. uSkinned 
themes make it simple to launch a 
responsive content-managed site in no 
time - just customise the colour palette, 
add your logo and content, and hit 
publish. You'll have a beautiful, SEO- 
optimised site in moments. 

uSkinned sites are built on SEO best 
practice. It’s easy to add metadata, as well 
as SEO-friendly URLs and code that will 
help you get to the top of the search 
results. With a fully featured blog you can 
keep your visitors up to date from day 
one. What’s more, each theme integrates 
seamlessly with your tech stack, including 
connecting with MailChimp or Campaign 
Monitor, or adding video from Vimeo 
or YouTube. 

Want to adapt the layout to fit your 
content? Every element is customisable. 
Make your content full-width, add 
columns, grids or stacked content. Need a 
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banner that really stands out? Add 
movement with a video or parallax image. 

uSkinned’s responsive themes work 
seamlessly on every device, be it desktop, 
tablet or mobile. This means you build 
your site once and your users get the 
Same great experience every time they 
visit, however they view the site. 

Together, uSkinned and Umbraco CMS 
give you powerful functionality - but if you 
want to add your own stamp, the source 
code is fully customisable. If you have the 


. 
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“Each theme is 
an outstanding 
piece of 

work, packed 
with the features 


we need and 
our clients 
demand” 


Jonathon Burton 
NHS Webteam 


Get professional results with 
uSkinned's responsive starter 
kits for Umbraco CMS 


STEP OUT OF THE OFFICE 


Left 
Flexible configuration options for content editors 


Above 
Choose from a wide range of responsive themes 


coding skills, you can dig in and take your 
uSkinned site to the next level by adding 
your own elements. It’s in your hands. 
Some of the world’s leading brands and 
development teams are already using 
uSkinned starter kits to launch amazing 
new websites for themselves and their 
clients. Check out some of their customer 
success stories (http://bit.ly/2EuKJQW). 
Dont forget you can get 15 percent off 
of your next uSkinned purchase - just 
enter the code 15OFFCB at the checkout. 
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COMPONENTS 


HOW TO GET READY FOR THE FUTURE OF HTML 


SK 


Build rat modular code for the 
web today with the power of 
Web Components and Polymer 


THE STATE OF WEB COMPONENTS 


Web components have been around for a while, but are they mainstream yet? 


The web components specifications, 
which describe a number of HTML 
Standards allowing modularisation of 
code on the web, have been around 
since 2011. The primary objective of 
web components is to allow you to 
break your code down into custom 
elements, or re-use those others 
have made. For example, a <google- 
map> element that replaces the need 
to write JavaScript to inject a map 
onto a page. 


The benefits are clear, since you can 
not only import modules easily, but 
also lay out more manageable code 
(no more scrolling through pages of 
nested divs). Yet, arguably, uptake has 
been slow. It's now 2018 and the full 
set of web component specifications 
are still not supported by every 
current browser, meaning that 
developers are reliant on either 
polyfills or frameworks to ensure 
Universal site compatibility. 


The practical consequence of this is 
that there’s not much incentive to 
build ‘vanilla web components right 
now. For most devs, there are two 
options. The prevalent approach is to 
use a front-end framework - Angular, 
React, Vue and so on are all built 
around a component model and their 
own syntax to define components. An 
alternative is Polymer. This aims to 
provide a more ‘pure’, standards-based 
web component experience. 


WHICH BROWSER SUPPORTS WHAT? 


The major browsers are getting closer to full support. Here’s a quick glance guide 


ELEMENTS 


CUSTOM 


HTML IMPORTS 


(but can be enabled) 


No 
No (but can be enabled) 
Ye 

O 


No (but can be enabled) 


THE WEB COMPONENTS STANDARDS 


Four separate HTML standards come together to enable web components to work 


Custom elements 
www.w3.org/TR/custom-elements 
Custom elements are the foundation 
of web components, and essentially 
What it’s all about. The specification 
introduces support for creation of new 
HTML tags, which mean that rather 
than being constrained to standard 
HTML syntax, you can define your 
own. The idea is that complex 
functionality can be hidden in a single 
custom element which behaves 
similarly to any standard HIML 
element. In addition, the custom 
elements specification allows support 
for the extension of existing HTML 
tags with custom functionality. 

One of the end goals of web 
components is to allow these custom 
elements to be redistributed as 
self-contained modules. According to 
W3, custom elements are part of a 
larger effort to “rationalise the 
platform”. See the latest Editor's Draft 
at http://bit.ly/2015v4u. 


Shadow DOM 


www.w3.org/TR/shadow-dom 
Shadow DOM, as you might expect, 
allows the creation of a ‘shadow’ 
DOM tree, which is attached to a 
normal parent DOM element but is 
self-contained. 

This is important as it enables us to 
encapsulate web components so their 
functionality does not interfere with 
that of the pages you build, and vice 
versa. If you add a component to your 
page, document.querySelectorQ 
function on the page will not return 
any nodes within the component's 
DOM. Styles are alSo scoped within the 
Shadow DOM. 

To see this in action, think about 
how the <video> element operates. 
The video player it creates includes a 
number of buttons and other controls, 
yet these are encapsulated (hidden) 
from the page you build, and 
manipulating your own DOM will not 
affect them. 


HTML templates 
http://bit.ly/20gPruL 

The most widely-supported of the web 
component standards, this introduces 
a <template> element which allows 
you to define fragments of HTML 
which can be instantiated when 
needed, and are re-usable. This is ideal 
for building modular components. 
When a template is first loaded, the 
browser processes its contents to 
make sure they are valid, but renders 
nothing and doesnt run any of its 
scripts. It does not form part of the 
document at this point, so will not be 
picked up by getElementByldQ or 
querySelector(. It is only used when 
we instantiate it using JavaScript, 
which is usually done by creating a 
copy of its content using document. 
importNodeO. Consequently, if we 
develop custom element's content as 
a template, we can utilise it whenever 
and wherever we want without 
worrying about artificially “hiding” it. 


WEB COMPONENTS 


“ The benefits are 


clear, since you can 
not only import 
modules easily, but 


also lay out more 
manageable code 


(no more scrolling 
through pages of 
nested divs) ” 


HTML imports 
www.w3.org/TR/html-imports 

The concept of HTML imports is to 
allow bundling of dependencies 
(HTML, CSS and JavaScript) into a 
single deliverable, added to a page 
with a single line of code. It’s 
conceptually similar to #include in C. 
A good example use case is Bootstrap, 
which typically requires multiple 
JavaScript and CSS files to be added 
via <script> and <link rel="stylesheet’> 
tags. With an HTML import, this could 
be diluted to a single <link 
rel"import’> statement. 

While it simplifies redistribution of 
components, this has proven a 
contentious standard. Mozilla have 
Stated that they will not implement it, 
and Google have deprecated use of 
imports to apply styling to a master 
document. Polyfills are available, 
however, and there are alternative 
ways to import components such as 
ES6 modules. 
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WEB COMPONENTS 


BUILD PRODUCTION-READY WEB COMPONENTS 


Google’s Polymer library is one of the easiest ways to get you started on the path to creating your own components 


Web components are a great idea. But 
there are a couple of problems to 
overcome before we can start using 
them. Firstly, there’s the issue of 
browser support - which we can solve 
through polyfills. There’s also the fact 
that they can be a little fiddly to set up 
using only vanilla HTML and 
JavaScript features. As a result, there 
are a number of libraries available 
which seek to make web components 


more widely compatible and simpler 
to work with. 

The most prolific of these is 
probably Google's Polymer library 
(www.polymer-project.org). Polymer 
doesnt set out to be a full-fledged 
frontend framework, but rather 
aims to keep as close to the standards 
as possible. 

Polymer fundamentally does two 
key things. Firstly, it polyfills browser 


‘5 PLACES POLYMER IS IN USE 


Fr 


=. 


DOMINO'S * 


‘C)'EDDING KEG STERI 


For many businesses, the newer 
pages start using Polymer first. 
Domino’s Pizza’s wedding service 
(yes, this is a thing!) uses it even 


Support for the web components 
Standards, so you can use the native 
web component functionality 
consistently across browsers. 
Secondly, it provides some additional 
features beyond ‘vanilla’ web 
components - including a simpler 
syntax for creating custom elements, 
and two-way data binding. 
Alongside the Polymer library, the 
team also provide a Polymer App 


Some big names are already using Polymer - and in some surprising places! 


Domino's Pizza 
http://bit. ly/2kS7VBQ 


though their main site doesn't yet. 


If you need proof that Polymer is 
ready for prime time, look no further 
than YouTube, one of the most 


YouTube 


https://www.youtube.com 


highly-trafficked sites on the web. 


Salesforce 
http://bit.ly/2EoJTZV 

Cloud computing provider Salesforce 
have built a set of Polymer 
components on top of the Salesforce 
SDK to quickly build Salesforce-driven 
mobile and tablet apps. 


POLYMER VS FRONT-END FRAMEWORKS 


With most popular frameworks already supporting modular development, do we really need Polymer? 


You might be wondering whether 
Polymer is a better choice than the 
likes of Angular or React. If you've 
used any modern frontend 
framework, youre probably already 
doing component-based 
development, and utilising third-party 
modules through the likes of nom. So 
why look at yet another library? 

The problem with frontend 
frameworks is that there are so many, 
each with differing styles of 
development, syntax, and module 
ecosystems. Furthermore, they have a 


| tendency to rise and fall out of favour. 
The consequence is a risk of 
constantly needing to learn the latest 
framework, and refactor code from 
those which are no longer popular. It 
also creates challenges for 
interoperability of modules between 
frameworks. If you want to use 
Bootstrap with Angular, you'll need a 
different module than you would to 
use it with React. 

Polymer sets out with a 

fundamentally different objective in 
mind. Rather than offering its own 
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opinionated style of development, 
Polymer’s motto is #UseThePlatform, 
which is indicative of their philosophy 
that developers should not need to fill 
gaps and add layers of abstraction to 
web technologies to work with them. 
This implication is that develooment 
Should rely on native platform features 
built into browsers, and libraries and 
frameworks should be lightweight and 
complement these platform features. 
With Polymer, custom elements ‘just 
work; like regular HTML elements, 
without a developer having to worry 


Toolbox, which is a collection 
of pre-built components and 
templates to help quickly create 
Progressive Web Apps. 


‘Polymer aims to 
keep as close to 
the standards as 


possible” 


Net-a-Porter 
http://bit.ly/2uauF If 


It’s not just Google using Polymer, 
though. Net-a-Porter adopted it very 
early on, and still use it on their store 
pages to this day. 


McDonald’s 


http://bit.ly/2HcdpQz 


It’s not just public websites which 
benefit from components. It seems 
McDonald's now use Polymer for the 
menu boards in their restaurants. 


about the details of Polymer itself. This 
means it is not mutually exclusive with 
the front-end framework of your 
choice. Modules such as reactpolymer 
are designed to let you to use Polymer 
components in a React app. 

A final consideration is performance. 
Frameworks can be large while 
Polymer’s payload is extremely 
small and will shrink further if 
browsers do not require polyfills. This 
means Polymer offers improved page 
load speeds compared to a 
heavyweight framework. 


WEB COMPONENTS 


GET STARTED WITH POLYMER 


You can be up and running with a Polymer app in no time at all. 
Let’s take a look at the basics of creating modular web apps 


1.GET THE POLYMER CLI 

The easiest way to get started with 
Polymer is using the CLI. If you've 
used Node and npm before, this will 
be very familiar. If you haven't used 
these before, you'll need them and 


can find out how to get them at www. 


npmjs.com/get-npm. 
Install the Polymer CLI using: 
Enpm install -g polymer-cli 


2. YOU’LL ALSO NEED BOWER 
The current version of Polymer (2.0) 
uses Bower as its package manager. 
Therefore, you'll need to install Bower 
to install custom Polymer 
components, which you'll almost 
certainly want to do. Bower itself can 
also be installed via nom: 

Bnpm install -g bower 


3. CREATE A POLYMER PROJECT 
Now we can create a project. Make a 
new directory, navigate to it, and run: 
B polymer init 

Amongst other choices, you'll be 


Simons=-MaPi:oolymer-damo aimond madir cat=-app 
Simons—-MBP :eolyser—demo simon$ cd cat-ape 
Simosns=-MaPrcat=app almond polymer init 

, Which starter template sould yow like to wee? ool yore 
infer fuanieg template polyaer=2-aterter=Kit... 

in 


prompted with a template option. 
Select ‘polymer-2-starter-kit? This will 
create a basic app with navigation and 
is the quickest way to see what 
Polymer is all about. 


4. CHECK IT WORKS 

This is a good time to check that the 
Starter project is working. Let's fire up 
the HTTP server. 

B polymer serve 

You should now be able to navigate to 
http://127.0.01:8081 and see a simple 
app layout with some sample pages 
and text. As you make code changes, 
the server will automatically pick them 
up so you shouldnt need to restart it. 


5. STARTING TO CUSTOMISE 
Let’s begin by making some changes 
to the main my-app component. The 
blue page header is defined in the 
<app-header> element. Go ahead and 
modify the main-title div: 

<div main-title>Cat Browser</ 

div> 


 cal-app — -bash — 184087 


Finding latest *2.8.8 release of PolywerElements/polymer-sterter-kit 


inte: Downloading v3.2.8 of PolymerElements/polymer-aterter-kit 
inte Ungacking template files 
iafes Finished eriting terclete files 


I'm all done. Running Gower lmetall for pou to destall the required dependencies. If this fails, try running the comand yourself. 
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You can also modify the <app-drawer> 
element to rename menu navigation 
items. For example: 
<a name=”view1l” 
href=”([LrootPath]]viewl”>Tabby 
Cat</a> 


6. EDITING PAGE CONTENT 

We can now make some changes to 
each page's content. In my-view1.html, 
modify the <hl> element to change 
the page title: 

B <hl>Tabby Cat</h1> 

You can also edit the paragraph 
content below to change the page's 
text. Go ahead and make some 
changes to each individual page. You 
might also want to look at my- 
view404. html, which is a 404 error 
page the router displays if it cannot 
find a requested resource. 


7. ADDING NEW PAGES 

We can also add our own new pages 
as custom components. Let's start 
by duplicating my-view3.html as 
my-view4.html. 

You can tweak the content, but 
most importantly you'll need to 
Update the dom-module identifier. 

— <dom-module id=“my-view4”> 
And modify the script at the bottom to 
export a new component called 
MyView4, which will enable you to use 
a <my-view4> element. 
class MyView4 extends Polymer. 
Element { 
static get is(Q) { return 


‘my-view4’; } 

} 

window.customElements. 
MyView4); 


define(MyView4.is, 


feature 


THE POLYMER 
STARTER TEMPLATE 


Let’s walk through the key parts 
of the polymer-2-starter-kit 
project (http://bit.ly/2GoRi7X) 
as mentioned in Step 3. 
polymer.json provides build 
configuration for Polymer. 

We generally won't make too 
many changes here during the 
tutorial, but notice that it defines 
the entry point (index.html), and 
a ‘shell’ (my-app.html) which is 
the main code to load the app 
and its resources. 

If you look at index.html, 
you'll see various prefabricated 
features to support service 
workers and more. However, 
the key thing that it does is load 
the <my-app> component and 
places it onto the page. 

So let’s take a look at my-app. 
html, which is where the heavy 
lifting happens. You'll notice 
immediately that it imports a 
number of components at the 
top, the syntax for which is 
remarkably straightforward. The 
<dom-module> element further 
down describes a custom 
element, and contains an HTML 
<template> (the presentation) 
and some JavaScript. The script 
defines some router behaviour 
(that is, links pages displayed 
to URLs as navigation occurs). 
The template includes a layout 
comprised of various custom 
elements, and some styling. 
Notice that it’s common to 
integrate markup, presentation 
and scripting into one 
component file. 

Each individual page of the 
app is implemented as its own 
custom component in the my- 
viewl1-3].html files. 
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Menu 


Tabby Cat 
Persian Cat 
Bangal Cat 


Sphinx Cat 


8. UPDATING THE 
MAIN COMPONENT 
Now we can use our new page 
element in the my-app component. 
There are several places we need to 
update. Firstly, we must import the 
new componert: 
<link rel=”lazy-import” 
href=“my-view4.html”> 
Next, we add a navigation item in the 
<app-drawer>: 
<a name=”view4” 
href=”([LrootPath] ]view4”’>Sphinx 
Cat</a> 
Finally, we add the new element within 
<iron-pages>: 
<my-view4 name=”view4”></ 
my-view4> 


9. POLYMER.JSON 
The final place we need to update with 
Our new page component is polymer. 
json - specifically, the ‘fragments 
parameter. polymerjson defines build 
configuration for Polymer, and 
“fragments” defines pages which are 
loaded asynchronously or on demand 
by the app. 
“fragments”: [ 
“src/my-viewl. html”, 
“src/my-view2.html”, 
“src/my-view3.html”, 
“src/my-view4.html”, 
“src/my-view404. html” 
I 


Cat Browser 


Sorry, there are no cats here for you! Head back home... 


10. INTRODUCING 
NEW ELEMENTS 
You should now have a customised 
version of the starter kit template, with 
a new page added. Now let’s install a 
couple of custom elements available 
online and put it to use. Elements are 
installed using Bower. 
bower install --save 
polymerelements/iron-image 
bower install --save 
FabricElements/skeleton-carousel 
The <skeleton-carousel> element adds 
an image carousel to the page. 
<iron-image> is a more customisable 
image tag provided by the Polymer 
team, which we can easily use within 
the carousel. 


11. ADDING THEM TO THE PAGE 
Let’s add a carousel to each of our 
pages. First we import the 
components: 
| <link rel=”"import” href=”../ 
bower_components/skeleton- 
carousel/skeleton-carousel. 
html”> 
<link rel=”"import” href=”../ 
bower_components/iron-image/ 
iron-image.html”> 
Then we utilise the custom elements 
in our content: 
<skeleton-carousel dots nav 
loop direction=”"vertical” auto> 
<iron-image data-src=”./ 
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images/cat1l.jpg” 
sizing=”cover”></iron-image> 
<iron-image data-src=”./ 
images/cat2.jpg” 
sizing=”cover”></iron-image> 
<iron-image data-src=”./ 
images/cat3.jpg” 
sizing=”cover”></iron-image> 
</skeleton-carousel> 


12. THE FINISHING TOUCHES 
Congratulations! You've built your first, 
simple Polymer page using custom 
elements. To finish it off, try adjusting 
some of the styling of the pages. You'll 
find styling of the app container, such 
as the header colour, in my-app.html. 
Styles shared between pages are in 
Shared-styles.hAtml - and notice that 
this is imported into each individual 
my-view#.html page. 


FINDING 
COMPONENTS FOR 
YOUR NEEDS 


One of the objectives of web 
components is to create 
an ecosystem of pre-built 
components available online. 
If you’ve used a framework like 
Angular, think of something 
similar to the packages you 
install via npm or yarn. 
Polymer components are 
currently installed using Bower, 
although this is changing soon. 
www.webcomponents.org 
has an extensive catalogue of 
components available for you 


_ to use. It’s generally worthwhile 


to check whether a component 
already exists before you 
ernbark upon creating one 
yourself. Conversely, of course, 
as you become more proficient 
with Polymer, you may want to 
think about sharing your own 
creations with others. 

What you will find at this point 
is that the ecosystem is very 
much in its infancy. While the 
Polymer team’s core Polymer 
Elements catalogue covers 
much of what you’re likely to 
need, the third-party ecosystem 
is nowhere near as extensive 
as something like Angular at 
this time. Furthermore, where 
components do exist, you'll 
likely find them at a very early 
stage, and possibly lacking 
some of the functionality or 
parametrisation you expect. 
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BUILD CUSTOM ELEMENTS 


We've built a simple Polymer app and used elements other people have created, but building your own 
elements is what web components is really about. Let’s take a look at how to do that... 


1. DEFINING AN ELEMENT 
We'll extend our app from the 
previous tutorial. A custom element is 
defined by extending a class from 
Polymer.element, which we'll do in a 
new title-card.htm file: 
<script> 
class TitleCard extends Polymer. 
Element { 
static get is(Q) { return 
‘title-card’ } 
y 
customElements.define(TitleCard. 
is, TitleCard); 
</script> 
The ‘is property defines the name 
of the element, So we can use 
<title-card> later. 


2. CREATING A TEMPLATE 
The content of a custom element is 
defined with markup inside a 
<template> tag. Let's start off with 
something very simple to show how 
this works: 
<template> 
<div id=“content”> 
This is my new custom 
element! 
</div> 
</template> 
Notice that were including both 
scripting and markup (and later 
styling) from the component in a 
single HTML file. 


3. SHADOW DOM 
There's something else we need to do, 
though. We want to encapsulate the 
details of our template within Shadow 
DOM. We do this by wrapping our 
scripting and template within a 
<dom-module> element. This also 
means that when we add styling, it is 
scoped within the Shadow DOM. 
<dom-module id=”title-card”> 
// Script and template code 
from steps 1 and 2 
</dom-module> 


4. USING OUR NEW ELEMENT 
That’s actually all you need for a 
basic new element. We can now 
import it into one of our existing 
pages (which actually are themselves 
custom components): 


Menu 


Tabby Cat 
Persian Cat Tabby Cat 
Bengal Cat 


Sphinx Gat 


<link rel="import” href=“title- 

card.html”> 

And then use it in our markup: 
<title-card></title-card> 


5. STYLING THE ELEMENT 
Our element is a little bland. Let's style 
the component. Your <style> tags 
need to go inside the <template> 
element. Remember the styles are 
scoped to the component’s Shadow 
DOM, so this wont affect styling of the 
rest of your page. 
<style> 

#content { 

margin-top: 1px; 

margin-bottom: 1px; 

} 

</style> 


6. INTRODUCING PROPERTIES 
At the moment our element isn't very 
customisable. Let’s introduce a 


Menu 


Tabby Cat 
Persian Cat 
Bengal Cat 


Sphinx Cat 


Tabby snot aciualhy a cat breed, bul a description of a distinctive pattem of stripes, 


OOousInE. 
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This is my new custom element! 


<title-card color=""> attribute. To do 
this, we need to add a new function to 
our component class: 
static get properties() { 

return { 

color: { 

type: String, 

value: “#ffffff” 

} 

He 

} 
This defines ‘color as a usable 
property of the <title-card> element. 


7. USING THE ELEMENT’S 
PROPERTIES 

We now have a ‘color variable 
available within the component. There 


are a couple of ways we could use this. 


We could create a constructor 
function and use JavaScript to apply it 
to the component. However, there’s an 
easier Way: 


Cat Browser | 


Tabby Cat 
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<div id=”content” 
style$=”background- 
color:{{color}};”> 
<hi>This is my new custom 
element!</h1> 
</div> 
This uses data binding to apply the 
‘color variable to the background- 
color part of the div’s style property. 


8. CUSTOMISING THE TEXT 
Lastly, we need to customise the text 
our element displays. Really we want 
the text displayed to be the content 
between the <title-card> and 
</title-card> tags. This can be achieved 
using <slot>: 
§ <hl><slot></slot></h1> 
Then we can use our custom element 
like this: 
<title-card 
color="#eeeeee”>Tabby Cat</ 
title-card> 


and swirls offen associated with tha domestic cat's wild 


49 


WEB COMPONENTS 


HOW TO EXTEND AN EXISTING ELEMENT 


Web components allow you to extend existing ones to add your own functionality. Polymer doesn’t 
currently support extending built-in elements, but here’s how you do it for third-party components 


1. DECLARE THE COMPONENT 
We'll create an extension of our 
<title-card> element. The <cat-title> 
element will add some additional text 
underneath the breed of cat. To start 
off, we need a new cat-title:Atml with a 
script defining the class: 
<script> 
class CatTitle extends 
customElements.get(‘title-card’) 
{ 
static get is(Q) { return 
‘cat-title’ } 
constructor() { 
super(); 
F 
J 


customElements. 
define(CatTitle.is, CatTitle); 

</script> 
Notice that we now no longer extend 
-Polymer.Element, but rather locate the 
class behind the <title-card> element 
(we could also reference the class 
directly rather than using 
customElements.get). 


2. THE TEMPLATE 
Once again, we also need a template 
for our element: 
<template> 

<div id=”parent”></div> 

<div id=”subtitle’”> 

<h2>Meet one of our favourite 

cats!</h2> 

</div> 

</template> 
Notice that we've placed an empty 
‘parent’ div at the top. We'll use this 


Eypased a 
Tabby Cat 


Meet one of our favourite cats! 


| Fitter 


|t 


‘\sterd { 
margLr 


! hackyoreerd-ce lar 
hiny wha 


later on to place the content of the 
element were inheriting into our 
new element. 


3. COMPONENT STYLING 
We can add styling as usual to the 
new component. We'll also inherit 
Styling from the parent component we 
are extending, so anything we write 
here supersedes the parent styling. 

<style> 

#subtitle { 

margin-bottom: 2Q@px; 

} 

</style> 
Remember that styles go within the 
<template> element. 


4.GETTING PARENT AND 
CHILD TEMPLATES 
The key thing we need to do is 
combine the templates of the parent 
<title-card> element that were 
inheriting, and the new <cat-title> 
element we've created. To do this, we 
can add scripting (outside the class 
definition) to obtain the parent and 
child templates: 
var childTemplate = Polymer. 
DomModule.import(‘cat-title’, 
‘template’); 
var parentTemplate = 
customElements.get(‘title-card’). 
template; 


5. COMBINING THE TEMPLATES 
What we now need to do is add the 
parent template to the child template. 
We'll use the ‘parent’ div we created 
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earlier as the placeholder to do this: 
var clone = document. 


importNode(parentTemplate. 
content, true); 
childTemplate.content. 
getElementById(“parent”). 
appendChild(clone); 
This means childTemplate now 
contains a DOM tree of content from 
both <title-card> and <cat-title>. 


6. OVERRIDING TEMPLATEQ 
Finally, we need to put our new 
childTemplate variable to good use. 
This is straightforward. We can 
override the template property of the 
CatCard class to return our newly- 
constructed variable: 

static get templated) { 

return childTemplate; 


I 


7. PUTTING THE ELEMENT TO USE 
That's all there is to it. If you modify 
your my-view#html pages, you can 
now utilise our new element like this: 
<cat-title 
color="#eeeeee”>Tabby Cat</ 
cat-title> 
You'll find it inherits the behaviour of 
<title-card>, but now handily adds the 
extra markup we placed in the 
<cat-title> template. 


Meet one of our favourite cats! 


| ALTERNATIVES 


TO POLYMER 


Polymer is arguably the 

most prolific library for 

the construction of web 
components, and is likely to 
continue to grow in popularity. 
However, it isn’t the only 
solution on the table to 
develop them. 

Vanilla web component 
development, without libraries, 
is more or less off the table at 
this point. Not only is it fiddly 
compared to the syntactic 
abstraction of something like 
Polymer, but more importantly 
the level of native browser 
support is insufficient for it to 
be viable. 

One alternative is skate.js 
(https://github.com/skatejs/ 
skatejs), which offers similar 
functionality to Polymer, 
including all the things you'd 
expect such as element lifecycle 
hooks. It’s lighter than Polymer, 
and likely to be faster as a result. 

Another lightweight option 
is slim.js (http://slimjs.com). In 
addition to all the things you'd 
expect, slim.js offers a plugin 
mechanism that allows you to 
extend the behaviour of 
an application by modifying 
all elements at a particular 
lifecycle stage. 

A few years back, x-tag 
was a promising library from 
Microsoft and potentially 
Polymer’s main rival. However, 
development hasn't been active 
for a while so it may not be such 
a good choice these days. 


Parent <title-card> element 


Extended <cat-title> element 


WHAT WILL POLYMER 3 BRING? 


A new version of Polymer is coming soon, but what changes does it bring? 


The current version of Polymer is 2.0, 
which was released in 2017 and 
brought about fairly wide-reaching 
changes compared to the library’s 
original incarnation. Polymer 3.0 is due 
at the end of Q1 2018, and while it aims 
to deliver most change under-the- 
hood with no API impact, there are still 
some interesting things to take note of. 
The first major change is a move 
from Bower to nom. Currently, 
Polymer components are distributed 


as Bower packages. nom has been the 
more popular of the two for some 
time, and Bower is now no longer 
under active development. As a result, 
Polymer is moving to nom. 

The other particularly significant 
change is a move away from HTML 
imports for components in favour of 
ES6 modules. As we've mentioned 
already, there’s been some 
disagreement amongst browser 
makers around HIML imports, and it’s 


friandl-onimatian 


Render your 4 er ©fects animations in 
browser as SVG or HTML canvds 


A Polymer 2.0 web component 


THE FUTURE OF WEB DEVELOPMENT 


possible that the standard may never 
be fully implemented. ES6 modules 
offer very similar functionality, 
enabling modules to be loaded from 
JavaScript files via a <script 
type="module’> tag, and are much 
more widely accepted. As a result, the 
Polymer team have decided to move 
in this direction for the future. A 
beneficial consequence of this change 
is that Polymer apps and elements will 
now run on the latest versions of 
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Chrome, Safari and Opera without 
need for polyfills. 

You might be concerned that the 
move to ES6 modules would require 
existing components to be rewritten 
for Polymer 3.0, since the way you'd 
package a module is now different, 
relying on bundling into a JavaScript 
file. Fortunately, the team have 
produced a tool, polymer-modularizer, 
which converts HTML import 


| packages to JavaScript modules. 


The web continues to evolve at a remarkable rate, with more and more features available natively 


Developing for the web today is a very 
different experience to several years 
ago, due to the rapid emergence of 
new standards and technologies. You 
can do more in the browser than ever 
before, without reliance on plugins. 
Web components are one of a 
number of standards and APIs which 
drive this progress. 

Web development is steadily 
converging on a situation where it is 
possible to build and maintain 
‘Progressive Web Apps with all the 


functionality you'd expect from 
desktop or native mobile software, 
using vanilla web technologies and 
without the need for heavyweight 
frameworks. This is nearer than you 
think - take web components 
alongside service workers (which allow 
apps to work offline) and the latest 
APIs (things like the Push API), and you 
have almost everything you need. 

As a result, libraries are likely to 
become smaller and lighter, and 
focused on augmenting the native 


functionality (think of how three.js uses 
WebGL, but offers abstraction to make 
it easier to get to grips with). 

Whether this supplants the benefits 
brought by popular frameworks for 
many developers remains to be seen. 
Ultimately it’s likely to come down to 
preferences around style, syntax and 
code structure. However, what may 
ultimately swing the balance is the 
longevity of standards-driven code. 
Apps built purely using native browser 
API\s and features will work fine long 


after any individual opinionated 
framework falls out of fashion. 


“Ultimately it’s 
likely to come 
down to 
preferences 
around style, 


syntax and code 
structure” 
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web workshop 
How to create animated 


mouse effects Regular mem 


As well as using the video to navigate, the 
; menu in the top right-hand corner can be 
Inspired by charlyzenger.ch/en used to navigate also. This has an interesting 
rollover animation and the menu covers the 
whole screen by animating over the top. 


Going home 
Wherever you are on the 
site the logo in the top 
right will take the user 
back to the home page 
and this logo spins 
around when the user 
rolls over it. 


‘Lhe Promise 


All change 

At various times during 

the playback of the film, 

the outer circle grows 

larger anda word 

appears in the centre of PLAY THE FILM 
the circle to emphasise | 

interactivity, thiscanbe | 
clicked on to make the | a | 
film interactive. 


New cursor Growing up 
The small white dot on the screen takes When the mouse cursor moves 


over from the usual mouse pointer, which over the text to play the film, the 
is hidden and this follows the mouse j ‘ outer ring grows larger to 
exactly. The ring follows with a slight emphasize that this is an 

easing to the cursor position. interactive element. 
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EXPERT ADVICE 


Quick access 

With a unique way of navigating the 
site using video, it is important that 
returning customers who want to get 
to a piece of jewellery quickly can do 
so and not have to sit through the 
video to navigate to the part they 
want to see. The site features a 
regular navigation panel which is 
hidden offscreen until needed. 


How to create animated mouse effects 
§ DOWNLOAD TUTORIAL FILES www/Jilesilo.co.uk/webdesigner 


Creating unique navigation 
Creating a unique approach to navigation is completed by enabling users to 
directly interact with the contents of the video on display. Navigation is done 


<comment> | iM a Similar way to Kinect experiences, using a circular holding bar to show 


What our 
experts think | te User wants to click an option 


of the site | Mark Shufflebottom, Professor of Interaction Design 


Technique 


1. Circle cursor 

To get a circle cursor similar to the one found in Charly 
Zenger, add two div tags to the body of your HTML 
document, one will hold the small dot circle and the 
other will hold the outer ring circle 

<div id=”’dot”></div> 

| <div id=’circle”></div> 


2. Create the CSS 


Either in a separate CSS file or in style tags on your head 
section add the following CSS rules. The first removes the 
regular mouse pointer from the page so that the new 
one can be seen. Next the ‘dot’ div is styled up to be a 
Small circle on the screen. 

html , 

body { 

cursor: none; 

3 

#dot { 

position: absolute; 

width: 12px; 

height: 12px; 

background-color: aquamarine; 

border-radius: 50%; 


I 


3. The outer ring 
Next up is the outer ring this will follow the dot but with 
a little easing. The CSS here will make this a larger circle 
but only using a simple outline rather than a filled in 
circle like the dot. The border radius of 50% makes a 
square div into a circle. 

#circle { 

position: absolute; 

width: 64px; 

height: 64px; 

border: 1px solid aquamarine; 

border-radius: 50%; 


} 
4. Adding JavaScript 


At the bottom of your web page, before the closing body 
tag, add ‘script’ tags and inside those tags add the 
following variables. They will hold positions and speed of 
movement and a reference to the two div elements 
being controlled. 

var speed = 4, _x = 0, _y = @, endX = @, 

endY = Q; 

var dot = document. getElementById(“dot”) ; 

var circ = document.getElementById(“circle’”) ; 


5. Detecting the mouse 
Inside the same style tags the mouse movement for the 
page is captured and the position of the mouse is stored 
in endX and endYy. The div with the ID of ‘dot’ will be 
made to follow this exactly, becoming the new cursor. 
~ document.onmousemove = function(e) { 
endX = e.pageXx; 
endY = e.pageY; 
dot.style.top = endY - 6 + “px”; 
dot.style.left = endX - 6 + “px”; 
aes 


6. Moving the outer circle 
The outer ring will have a little easing into place so this 
needs to be continuously animated using the browser's 
‘requestAnimationFrame function. An easing equation is 
worked out and applied to the circle so that this follows 
the dot just as on the Charly Zenger site. 

function animate() { 

requestAnimationFrame (animate) ; 

_x += (endX - _x) / speed; 

_y t= (endY - _y) / speed; 

circ. style:top-= say =.33° +) “px”: 

circ.style.left = _x - 33 + “px”; 

i, 


animate(); 
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Tutorials 


Create a stunning 
3D WebGL game 


In the first of a two-part tutorial, you will set up the project for 
creating a stunning endless flying 3D game using ThreeJS 
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DOWNLOAD TUTORIAL FILES 
tutorial . www filesilo.co.uk/webdesigner 


any of the tasks that once needed 
to be apps are becoming more and 
more possible in the web browser. 
One such area is games. The HTML5 
Canvas element allowed for 2D games based on images 


and with all modern web browsers able to utilise WebGL, 
3D games can played on any device. In this tutorial we are 
going to take advantage of that and create a variation on 
the ‘endless runner type of game, by creating a 3D 
endless flying game down a track with obstacles. 
Because we are not using a games engine, many of 
the things that game engines offer, like inputs and 
collisions, will have to be coded from scratch. As such, 
there are a lot of things to set up, so in this first part of the 
tutorial a lot of the game setup will be done. These will be 
things like creating a preloader to hold the screen until all 
the models have loaded, a title screen, enabling the game 
to start and end, updating the score and also updating 
the control of the ship. The game will run on desktop and 
mobile so the ship will be controlled by mouse and touch 
input to steer around obstacles. In next month's issue, we 
will complete the game by adding all of the challenges 
with obstacles and collision detection, while tying up the 
loose ends and bringing them into a fully-working game. 


1. Starting off 


Open the ‘start’ folder in your code IDE and open the 
javascript file ‘game_ptljs, which is just an empty file. Add 
these variables at the top of the empty page. This code 
will control various elements in the game as it’s 
developed. As this isn't a games engine, many things 
have to be coded by ourselves. 
var SCREEN_WIDTH = window. innerWidth, 
SCREEN_HEIGHT = window. innerHeight, 
QUART_SCREEN = window.innerWidth / 4, 
loaded = Q, 
windowHalfX = window.innerWidth / 2, 


itemsToLoad = 2, 


windowHalfY = window.innerHeight / 2, 
camera, scene, renderer, ship, c, m, 0, 


1, active, inactive, raycaster, SPEED, dead, 


delta, score, scoreEl, pCounter = @, playing 
= false; 

var textureLoader = new THREE. 
TextureLoader () ; 

var composer, filmPass, renderPass, 

copyPass, effectVignette, shaderTime = Q; 
var mobile = isMobileDevice(); 


2. Listening in 
Now a bunch of event listeners are attached to the 
mouse moving on desktop or the touch events on 
mobile to get the user input to the game. The function 
checks if this device is mobile by querying if it has 
orientation built into the browser or it’s IE Mobile. 
var screen = document. 
getElementById(“title’”) ; 
var clock = new THREE.Clock(); 
document .addEventListener( ‘mousemove’ , 
onDocumentMouseMove, false); 
document .addEventListener(‘touchstart’ , 
onDocumentTouchStart, false); 
document .addEventListener(‘touchmove’ , 
onDocumentTouchMove, false); 
window. addEventListener( ‘resize’ , 
onWindowResize, false); 
function isMobileDevice() { 
return (typeof window.orientation !== 
“undefined”) || (navigator.userAgent. 
indexOf(‘IEMobile’) !== -1); 
3; 


3. Setting the scene 
The next function sets up various elements in the 3D 
scene like the camera and how much fog to display, the 
background colour is also created. The div that will display 
the score for the user is stored in a variable for easy 
Updating of the score each frame. 

function sceneSet() { 

var container = document. 
createElement(‘div’); 
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document .body.appendChild(container) ; 
scoreEl = document. 
getElementById( ‘score’ ) ; 
camera = new THREE.PerspectiveCamera(75, 
SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000); 
camera.position.set(@, 6, 18); 
scene = new THREE. Scene(); 
scene.fog = new THREE.FogExp2(@xb6d9e6, 
Q@.QQ@5) ; 
renderer = new THREE.WebGLRenderer () ; 
renderer. setClearColor (Q@xadc9d4) ; 


4. Lighting up 
The renderer is set to the pixel density of the screen that 
it's being viewed on and it’s set to fill the full width and 
height of the browser. If it’s not a mobile, soft shadows will 
be used. A hemisphere light is added which puts a light 
blue colour for the sky and a dark orange for the ground. 
renderer. setPixelRatio(window. 
devicePixelRatio) ; 
renderer. setSize(SCREEN_WIDTH, SCREEN_ 
HEIGHT) ; 
renderer. shadowMap.enabled = true; 
if (!mobile) renderer.shadowMap.type = 
THREE . PCFSof tShadowMap ; 
container. appendChild(renderer. 
domElement) ; 
var light = new THREE. 
HemisphereLight(Qxale2f5, @x6f4d25, 9.5); 
scene.add(light) ; 
light = new THREE.SpotLight(Oxfff6c7, 
@.5); 
light.position.set(@, 200, -20); 


Post-processing 


This refers to sending all the pixels on the 
screen to the GPU to have a special filter 
applied. This happens as close to 6Ofps 


that the browser can run. 


Top 

Here is the basic interface of the game, with the logo 
and the start button, this is all added in a layer of HTML 
over the top. The ‘beginGame’ function is called when 
the start button is pressed. 


Left 

As the 3D scene is initialised the post-processing 
effects add a film grain and vignette effect over 
the top of the screen. 
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5. In the spotlight 


A spotlight is used in ThreeJS to cast shadows, so we're 
adding one here, and these settings set the properties of 
the spotlight. The size of shadow map and light decay are 
worked out. If on mobile these shadows will not be drawn 
since it reduces the amount of work in each frame and so 
the game should run faster. 
light.target.position.set(@, 2, Q); 
light.castShadow = true; 
light.shadow = new THREE.LightShadow(new 
THREE.PerspectiveCamera(90, 1, 90, 50QQ)); 
light.shadow.bias = Q. 0008; 
light.shadow.mapSize.width = 1024; 
light.shadow.mapSize.height = 1024; 
light.penumbra = 1; 
light.decay = 5; 
scene.add(light); } 


6. Post-processing 
The next function sets up the post-processing for the 
project. If on mobile, both the tiltshift shader and the 
vignette shaders are ignored. These only need to run 
on the better processing power available through 
desktop computers and it wouldn't be smart to drain 
our user's mobile battery! 
function postFxX() { 
renderPass = new THREE.RenderPass(scene, 
camera) ; 
if (!mobile) { 
hblur = new THREE. ShaderPass(THREE. 
HorizontalTiltShiftShader) ; 
vblur = new THREE.ShaderPass(THREE. 
VerticalTiltShiftShader) ; 
effectVignette = new THREE. 
ShaderPass (THREE . VignetteShader) ; } 


Going fullscreen 


In order to go fullscreen in the browser, the game 
uses a library called ‘Screenfull’ (https://github.com/ 
sindresorhus/screenfull.js) that enables an easy call 
to fullscreen across multiple browsers. 


Top 
This ship is added to the scene in Step 15 and this 
begins to fill out the title page for the user. 


Right 

The track panels are added as they load. When the 
final game is completed, this won't display here - 
it’s just to check the model has loaded and is at 
the right scaling for the game. 
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filmPass = new THREE.ShaderPass(THREE. 
FilmShader) ; 

copyPass = new THREE.ShaderPass(THREE. 
CopyShader) ; 

composer = new THREE. 
EffectComposer (renderer) ; 


7. Completing the passes 
Each post-processing effect has to be run through the 
effects composer as a pass. Every device will have a film 
grain pass, but mobiles and tablets will ignore the tilt-shift 
and vignette passes. Each pass means all the screen 
pixels need to be processed and this is where it could 
have a big impact on mobile. 

composer .addPass(renderPass) ; 

if (!mobile) { 

composer .addPass(hblur) ; 

composer .addPass(vblur) ; 

} 

composer .addPass(filmPass) ; 

if (!mobile) composer. 

addPass(effectVignette) ; 
composer .addPass(copyPass) ; 
copyPass.renderToScreen = true; 


params(); } 


8. Post settings 

In the ‘params function, all of the parameters of 
post-processing are set up so that the screen gets the 
right effects added to it. A tiltshift with a blurriness of five 
pixels is set, and then how dark and how far onto the 
screen the vignette should be displayed is added. 


9. Setting a preloader 

The last of the film grain settings are added, and that 
concludes all the postprocessing. Next is the preloader. 
Every time an element is loader this function is called 
and when all the elements are loaded the overlay 
message of ‘loading is taken off the screen and the 
game interface will display. 

| filmPass.uniforms[‘sCount’ ].value = Q; 


filmPass.uniforms[ ‘sIntensity’].value = 


Q.4; 
filmPass.uniforms[ ‘nIntensity’].value = 
15>} 
function checkLoad() { 
loaded++; 
if (loaded == itemsToLoad) { 
render (); 
document. getElementById(“preloader’”’) . 
style.visibility = ‘hidden’ ; 
ae 


10. Resizing the screen 

The game will make use of the fullscreen API, which will 
put it fullscreen on browsers that support this feature. 
The function here just makes sure that if the window 

is resized the display and the camera aspect ratio are 
made to match those new sizes on the screen. 


11. Touch and go 
The map function is used to map the position of the 
mouse in the width of the browser onto the movement of 
the spaceship. The movement is controlled either by 
following the mouse pointer or the position of the first 
finger on the touch input. The touch start event will 
update the mousexX position. 
function map(n, startl, stopl, start2, 
stop2) { 
return ((n - start1) / (stop1 - start1)) 
* (stop2 - start2) + start2; 
ai 
function onDocumentTouchStart(event) { 
if (event.touches.length > 1) { 
event. preventDefault() ; 
mouseX = event. touches[lQ].pagex; 


ia 


12. More input 

On mobile, the touch move event is used to update the 
finger movement so this is being detected here. The 
‘mousexX’ movement on desktop gets the mouse’s 
position rather than a finger position. This covers all the 
event handling of inout no matter what device this is on. 


function onDocumentTouchMove(event) { 
if (event.touches.length == 1) { 
event. preventDefault(); 
mouseX = event. touches[lQ].pagex; 
3 

} 


function onDocumentMouseMove(event) { 
mouseX = event.clientx; 


I 


13. Starting the game 


This function is what is called when the user clicks the 
start button on the screen. Using the fullscreen API a call 
is made to display the browser in fullscreen. The mouse 
position is set to the centre of the screen and things like 
the score are set to O and the initial soeed the spaceship 
is to move at is set. 


14. Start playing 

Continuing the start of the game, the internal clock is 
Started and any active track panels are cleared ready to 
play. You will notice that there is a large comment about 
building track panels, this will be done in the second part 
of this tutorial, next issue. The ‘game over function is also 
started here with title screen being displayed and the 
screen set to grey. 


15. Ending it all 


When the game comes to an end, all of the active 
track pieces are removed from the ‘active’ array and 
from the display in the scene. The game clock is also 
stopped so that will cancel all animations from 
continuing to run on. The ‘init’ function is started and 
here the scene setup is called and post processing 
effects are run. 
for (i = active.length - 1; 1 >= 0; i--) { 

var mdl = activeLil; 

active.splice(i, 1); 

scene. remove (mdl.obj) ; 

inactive. push(md1) ; } 

clock.stop(); } 

function initQ) { 

sceneSet(); 

postFX(); 

inactive = []; 


Tutorials 


Create astunning 3D WebGL game 


16. Loading the ship 


As part of the game initializing, a raycaster is created, this 


will be used later to detect collisions as it brings back a list 
of elements in front of the spaceship. Speaking of the 
Ship, that model is loaded and it’s set to cast and receive 
Shadows once it’s loaded. 


17. Updating the ship 


The ship is scaled down by half of its original size and 
positioned into the scene. The ‘checkLoad function is 
called to see if all game assets have loaded. Another 
loader is set, but this time it will load in all of the track 
panels. The track and ship have been placed in different 
files, but it would all still work if it was the same file. 
dae.scale.x = dae.scale.y = dae.scale.z = 
Q.5; 
dae.updateMatrix(); 
ship = dae; 
ship.position.set(@, @, 6); 
ship.rotation.y = Q; 
scene. add(ship) ; 
checkLoad() ; 
i; 
var loader2 = new THREE.ColladaLoader() ; 
loader2.options.convertUpAxis = true; 
loader2.load(‘panels.dae’, function 
(collada) { 


18. Adding the track 


Continuing with the track panels, these are all set to cast 
and receive shadows and to be scaled down. Another 
comment exists as next issue the static model of the 
track will have animations and random positions of 
various hazards placed in here. The track is placed into 
the scene for now just to get a sense of the design. 
var dae = collada.scene; 
dae.traverse(function (child) { 
if (child instanceof THREE.Mesh) { 
child.castShadow = true; 
child.receiveShadow = true; } 
Ds 
dae.scale.x = dae.scale.y = dae.scale.z = 
Oo: 
dae.updateMatrix(); 
/////// PANEL SETUP TO DO /////// 
scene. add(dae) ; 


Controlling the movement of the ship 


Because this game is 
being made to run on both 
desktop and mobile, there 
are a number of different 
elements that need to be 
brought together. Firstly, 
the ship is being controlled 
by either the position 

of mouse or finger on 
touchscreens. To get this 
working the game needs 
to grab the position of the 
finger or mouse, which 

is stored in the variable 
‘mouseX’. The second part 
is to translate that position, 


but we don’t want the ship 
to just follow where the 
user is at. Instead there 
needs to be some easing 
that allows for skill and 
challenge when steering 
around objects. Sure, the 
user can move their mouse 
fast to steer but the ship 
has to feel responsive while 
not following too closely 
and making the game too 
easy. We think we got it just 
right but you can play with 
the numbers in Step 21 if 
you disagree! 


19. Making updates 
After the track panels are all loaded the ‘checkLoad’ 
function is called to see if all assets have been loaded. The 
‘init’ function is called and the ‘render function is set up. 
The render function will run as close to 6Ofps as the 
browser can manage and will update the screen. The 
comment here will be filled in with code next issue. 
checkLoad() ; ena 
initQ); 
function render() { 
requestAnimationFrame(render) ; 
delta = clock.getDelta(); 
if (playing) { 
/////// UPDATE PANELS TO DO HERE /////// 
updateShip() ; 


20. Updating positions 

The score is increased every frame that the game is 
running, as it will just go up with how long the player 
Stays alive. The camera is updated to look at the ship 
and move with the ship as controlled by the user. The 
post-processing effects are updated and the collision 
tests will be added in the follow-up tutorial. 


21. Final step 
The update ship function moves the ship as per the 
players mouse movement, but adds easing so it slides 
into place. Save the project and at this stage you will see 
the game loads, and the title screen and the mouse 
movement work. Next issue the challenge will be added 
with different elements to avoid. 
if (dead == true && playing == true) { 
playing = false; 
gameOver () ; 
1a 
function updateShip() { 
var newX = map(mouseX, QUART_SCREEN, 
QUART_SCREEN * 3, -15, 15); 
ship.position.x += ((newX) - ship. 
position.x) * Q.Q5; 
if (ship.position.x < -15) ship.position.x 


= -15; 

if (ship.position.x > 15) ship.position.x 
= 15; 

ship.rotation.z = (ship.position.x - newX) 
x OL" } 
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Discover the benefits of Conversion Rate Optimisation (CRO) 
wand convert more of your existing traffic 


onversion Rate Optimisation is a critical 
element in your business’ digital 
marketing process. CRO looks at 
converting more of your existing traffic, 
aligning your focus on making more of what you already 
have. It’s also one of the quickest ways to improve a 
digital advertising campaign. 

By increasing the percentage of website visitors who 
take your desired action (goals), we increase both micro 
and macro-conversions. Micro-conversions are your 
Smaller conversions such as filling out a form or signing 
up to an email. And macro-conversions are your primary 


goals, such as your users purchasing a product or service. 


The CRO process involves digging deeper, 
understanding your key audience better, their interaction 
across your website and what’s stopping them from 
completing your goals. 

Testing is the key - you can form hypotheses about 
your user's interactions, but you need to test and analyse 
What your users really need. It’s often the small changes, 
which can end up making the biggest impact. Let’s get 
Started by helping you to increase your conversions. 


1. Where should I start? 


Begin by analysing your user experience and identify any 
obvious barriers for conversion. Ease the journey of your 
audience that actively converts, so they can quickly and 
confidently reach a converting decision. Look for a 
solution in line with your goals and develop a hypothesis 
to test, ensure you can track the interactions, analyse the 
results and implement the solution. 


2. Does colour have an impact? 


There is a psychology behind colour, and gains can be 
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made by understanding what colour resonates better 
with your audience and enables your call to actions to 
stand out more. Test what combinations of colours in 
both your CTAs, backgrounds and fonts increase your 
overall conversion rate. For example, test the colours red 
vs green vs orange - does one colour have an effect 
when used in the background of your CTAs? Look at a 
contrast in particular, as well as those colours that 
compliment your overall design. You can also combine 
this with the ‘language’ used within the CTA, 
understanding what resonates better with your audience 
as well as highlighting to them where to click. 


3. Find language and messaging 
that resonates 

By understanding your key audience better and what 
messaging resonates with them, you can make the 
necessary changes to your copy, headlines and CTAs to 
push them closer to conversion. Your website copy and 
language will steer your audience to take action, for 
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example, to click a button to buy, download or move onto 
the next step. We have to therefore give them a reason, 
compelling enough to take action by adding value and 
relevancy. Split test generic words within your CTAs, such 
as ‘click here’ or ‘buy now’ with more tailored messaging, 
highlighting the benefits or scarcity. 

Utilise personal terminology such as ‘my’ and ‘your’. 
You can also add value-based terminology such as ‘free, 
‘want’, ‘need’, ‘save and urgency-based terms such as 
‘now, today’ and ‘ends. Understand what their motivation 
is, and how you can speak to their needs consistently 
across their user journey. 


4. Bullet points and numbers 

People love lists and concise sentences. Split out your 
copy with bullet points, numbers and concise sentences 
to keep your users attention. Test the introduction of lists, 


Positive vs negative 


As well as focusing on the positives, look at 
flipping content and CTAs to highlight the 
negatives and the subsequent positive actions 
from it. For example, ten things you’re doing 
wrong with SEO? 


Left 

A great example of social proofing, highlighting how many 
like-minded individuals have looked at and purchased the 
product you're considering 


Above 

A useful pop-up, immediately attracting attention 

and building rapport to sign in and gain the irresistible 
offers available 
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Conoerts 
remove the clutter and avoid weffle as this will increase 
your audience's confidence in you and the chances of 
them moving onto the next step. 


5. CTA placement 

Take advantage of the reading and scanning habits of 
your users. By understanding how they interact with your 
pages you can place your CTAs to direct their eye more 


Keywords 


Test and optimise the keywords in your metas, copy, 
CTAs and headers. Look at length, terminology, the 
use of puns and topics that are relevant to recent 
trends. This will bring in new traffic and aid in their 
engagement once arrived. 


Above 

Take advantage of instant messaging on high performing 
webpages, encouraging interaction to push users closer 
to conversion 


Right 


Simplify the user experience from your basket to checkout 
and remove any unnecessary steps to lift conversion 
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It's easy. 


Search 

Know what you want to listen to? Just search and hit 
play. 

Browse 

Check out the latest charts, brand new releases and 
great playlists for right now 

Discover 


Enjoy new music every Monday with your own personal 


playlist. Or sit back and enjoy Radio. 


effectively. Utilise heat-mapping tools to understand how 
they interact with your design. From these insights test 
the placement of your CTAS, as well as the introduction of 
visual clues such as arrows to direct their eye to where 
you want them to look. 


6. Shape and size 

Size and shape can also have an impact on the likelinood 
of your target audience clicking your CTAs and navigating 
across your website. Increase the size of your CTA 
buttons, making them easier to find as well as changing 
the shape to see if they get interacted with more. Test 
different shapes such as square, rectangle, oval and 
irregular shapes to catch your user’s attention and stand 
out further. 
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7. Build trust with social proofing 
Social proofing is another trust signal that builds 
confidence with your website visitors. It highlights how 
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other like-minded individuals have purchased your 
products or services and are happy with their decision to 
do so. It’s about eliminating fear and overcoming 
objections, which can have a positive impact on sales and 
conversions. If not already added, ensure you test the 
addition of different social proof statements across 
different parts of your website. 

For example, adding testimonials, reviews, number of 
items sold and the number of customers purchased in 
the last hour/day/week. Test these across different pages 
and placements, such as within your hero image, above 
and below the fold, within your header hierarchy and in 
formats such as video. 
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8. Do trust marks 

and badges help? 

Trust marks are also an Indicator of quality and assurance, 
which further increases your customers trust in your 
product or service. This can ultimately have a positive 
impact on your conversions, removing the doubt from 
your users taking the next step. Add trust marks to your 
website and landing page copy - in particular around 
your CTAs. For example, adding logos which indicate that 
you are government endorsed, members of legal bodies 
and federations as well as fully trained and certified. Test if 
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their inclusion affects your results, but be mindful if you 
have multiple badges as the combination of these would 
also need to be tested. 


9. Pop-ups 

Adding pop-ups designed to attract attention and offer 
value, can be particularly useful in lifting conversion. They 
can aid in your efforts to keep users on your website and 
shop for longer or convert before they leave. Test the 
introduction of pop-ups in varied formats and 
placements, such as a slide-in box, drop-down banner 

or pop-up box. A particularly useful placement is on 

your exit page. Test conversion-driven copy and an 
irresistible offer to create urgency and encourage visitors 
to act now. 
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10. Real-time messaging 


Look at the addition of instant messaging capabilities, 
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Landing pages 
Landing pages are 
where your website 
visitors become a lead, 
engage more with 
your brand or convert. 
Start by identifying 

the pages with high 
levels of web traffic, but 
low conversion rates. 
Run A/B tests to get 
the most from them; 
test new variations of 
layout, design, imagery, 
content and CTAs 

to drive action and 
increase conversion. 
Long vs short form 
copy is a particular test 
worth performing on 
your landing pages, 

in particular by traffic 
source to see what is 
more effective to your 
audience. You can then 
look at pages with high 
conversion rates but 
low web traffic, drive 
more traffic to these 
pages by their existing 
sources and test new. 
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such as live chat to high-performing webpages. I hese 
could include your pricing or product pages, encouraging 
interaction, rather than users leaving. Test the benefits of 
answering questions, building relationships and offering 
incentives pushing them closer to converting. 


upon them. As you have a better understanding of the 

user experience, you will be able to take what works and 
expand on it further. Inevitably building on the positives 
will increase engagement and result in a lift in conversion. 


11. Simplicity can cause a 
positive uplift 

We tend to always migrate to the easiest option to 
achieve a desired result. Test simplifying your CTAs and 
messaging to lift conversion. Tell your audience exactly 
why they should buy from you and what they will get 
out of it. You can also adopt this approach to your 
checkout process, by simplifying the experience from 
basket to checkout and removing any unnecessary 
Steps to lift conversion. 


12. Take what works and 

expand on it 

With CRO you are trying to understand what is working 
well on your website, and from these valuable insights, act 
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Learn how to create a simple webpage design using Sketch, 
and discover essential tips and tricks along the way 


al \ 


os 


ketch is a popular macOS app, which is 
built from the ground up for designing 
user interfaces. Due to its ease of use, 
great performance and countless 


community-built plugins, it's been slowly taking over the 
mantle of de-facto design app from Adobe Photoshop. 

In this tutorial, we'll be working in Sketch to create a 
simple webpage. Along the way, we'll learn tips, tricks and 
how to leverage one of its most useful plugins, Craft. 

First things first, download the tutorial files from 
FileSilo. Next, open Sketch and create a new document. 
We need to create the artboard where we'll design our 
webpage. Thankfully, Sketch comes with quite a few 
default sizes out of the box. 

Click Insert>Artboard, then select Responsive Web in 
the drop-down menu, followed by Desktop HD. This 
Should give you a blank canvas that is roughly the size of 
a desktop window. The first thing to do is check the 
Background Colour option and change the colour to 
#FAFA4F4’ which is light grey. Next, change the height of 
the artboard to 18OOpx to give us ample space. During 
this tutorial, Layers list will refer to the left menu, while 
Inspector toolbar will refer to the right. So, without further 
ado, let’s begin! 


1. Create website header 

Press the R key and then draw a rectangle in the middle 
of the artboard. Any size will do. On click, you'll see its 
dimensions in the inspector toolbar. In addition to 
accepting pixel values, you can also use percentages. Set 
the width to 100% to fill the artboard horizontally, and 
then its height to 493px. Move it to the top left (or set X 
and Y position to O), then remove its border via the 
checkbox in the status bar. 
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2. Header background image 

From the ‘support-images directory, open ‘ohoto.jog and 
then copy and paste it into your design. We'll use this as 
the background image for the header. In the Layers list, 
right click on the rectangle layer and click Mask. Then 
select the Photo layer and set its X/Y coordinates to -215’ 
and -357 to set it into place. 


3. Point Editing 


Let's edit our header to make it a more interesting shape. 
With the rectangle selected, press the Enter key to trigger 
Point Editing mode. Select the bottom right point and set 
its Y coordinate to 342. Then press Enter again or click 
Finish Editing in the Inspector toolbar. 


4. Adding a linear gradient 

In the Layers list, right click on your rectangle and click 
duplicate. Move this copy above the photo layer. With the 
copy still selected, click Fill in the Inspector toolbar, 
followed by the Linear Gradient option (second one 
along), setting its first colour to #9877F8, and the second 
to #26B2F 8°. Then back on the artboard, drag the top of 
the gradient to the top left of the banner, and the bottom 
to the bottom right, so the gradient is diagonal. Give it an 
Opacity of 50%. Finally, select all the layers and press 
Command+G to group them together to isolate the 
masking effect. 
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5. Setting up columns 

One great thing about Sketch is that a layout columns 
system is available out of the box. You can configure it by 
clicking the View button, then Layout Settings. Copy the 
settings from the screenshot below and make sure to 
click the Center button to align it. You can then make it 
visible it with Ctrl+L. 
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Sketch version 


One of the good things about Sketch is that new 
features are being developed all the time. This 
tutorial was written using Sketch v48.2, which at 
the time of writing was the most up to date 
version available. 


Sketchpacks 


rec) hear 


Above 

One of the best ways to install and manage Sketch 
plugins is through an app called Sketchpack, which you 
can download from sketchpacks.com 


Left 

In addition to providing easy access to Sketch plugins from 
your desktop, it allows you to sync plugins across 
machines and teams 
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6. Adding a logo 

Open ‘support-images/icon-logo.svg’ and then copy and 
paste it into your design. With the Layout column active, 
drag the logo to the top left of the first column. When you 
get close enough, it should snap into place. So it’s not 
touching the top of the page, select the logo and then 
hold Shift and press the down key twice to move it 20px. 
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7. Create your first symbol 

Symbols allow easy reuse of elements across a design. 
With the logo layer selected, click the Create Symbol 
button and call it ‘Icons/Logo’ Icons refers to the 
symbol category and Logo refers to the symbol name. 
Above the layers list, you should see a new page appear 
called Symbols. This stores all the master versions of 
the symbols, and any changes to these will filter down 
into all of the different places they're used (known as 
Symbol Instances). 


8. Colour the logo symbol 

Open the Symbols page and on the logo artboard create 
a 15px x 15px rectangle and remove the border. With it 
selected, click CreateCol Symbol and call it ‘Colours/ 
Orange’. Edit your new symbol’s master and change its fill 
colour to ‘#FF8654" Back in the logo symbol, resize the 
orange block to the 100% width/height of the artboard, 
rename it lcon Colour and then right click on the logo 
layer and select Mask. Back in the main artboard the logo 
will be orange. 


Sketch versioning 


One handy feature included in Sketch is version 


control. If you need to go back to a previous version 
of a design, you can do so by going to Fill>Revert 
To>Browse All Versions. 


Symbol Organizer 


Above 

One useful plugin available via Sketchpacks is called 
Symbol Organizer. As you've probably guessed, it allows 
you to organise symbols. 


Right 
It handily rearranges disarrayed symbols into ordered 
groups based on categories. 
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9. Create more colour blocks 
The more colours we create, the more options we'll 
have to pick from to colour our icons. Duplicate the 
Colours/Orange symbol and create one for each of 
these colours: #3B3B39" #CCCCCC and #FFFFFF’, 
renaming to ‘Colours/Dark-Grey’, ‘Colours/Grey’ and 
‘Colours/White’ respectively. 


10. Working with 

symbol overrides 

Select the logo in your main artboard and you'll notice an 
Overrides option has appeared in the Inspector toolbar. If 
you click the Icon Colour drop-down menu, you'll see all 
the colours we've just added, and if you select one, it 
replaces the colour used in the symbol. Sketch allows you 
to replace nested symbols with any other that match its 
dimensions. Let’s make the logo white, so it’s clearly 
visible against the background. 


11. Building a reusable 

button symbol 

Create a 1OOpx x 40px rectangle, click Create Symbol 
and call it ‘Components/Button. Open it up on the 
Symbols page (easily done by double-clicking a Symbol 
Instance), remove the border and then change its Radius 
to 10 to add rounded corners. Next click 
Insert>Symbols>Colours>Dark Grey to import the colour 
blocks we previously used for the logo. Stretch the block 
to the full width/height of the button artboard, rename it 
‘Button Colour’ and then activate the mask property on 
the button rectangle. 
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12. Add text to button 


To add text to the button, when editing its master, go to 
Insert>Text (or the T key). Type Text, resize it to 16px and 
change its weight to bold and its colour to white so you 
can see it. Align it slightly to the left (X:17 Y:9) so we have a 
bit of a gap to the right. The tutorial uses the Roboto font, 
available to download from Google Fonts, but feel free to 
use an alternative if you don't have it. 


Text 


13. Add icon to button 


Open ‘support-images/icon-search.svg, copy and paste 
into your button and then reposition so it’s vertically 
centred and right aligned (X:71 Y:11). Convert it into a 
symbol called ‘Icons/Search’ and rename its layer name in 
the button to Icon. You'll want to make the icon’s artboard 
bigger, as like with colours, if we keep icon artboards the 
same size, they can be swapped. Click on ‘Icons/Search’ in 
the Layers list and then set the artboard size in the 
Inspector toolbar to 20px x 20px. Then, centre align the 
search icon (X:2, Y:2). 


14. Add colour to search icon 

Open the search icon master again and import a colour 
symbol, resize it to 100% and then toggle the Mask 
setting on the icon, as before. Name the colour symbol in 
this instance ‘Icon Colour. Back in the button symbol, 
because we've resized the search icon artboard, it may be 
a little distorted, so set its width/height to 20px. You will 
then need to reposition it slightly to vertically centre it 
again (X:71 Y-9). 
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Zoom to actual size 


Fit artboard to screen 


Toggle columns 


Toggle pixel grid 
Move canvas 
Hide menus 
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Tutorials 


Design for the web with Sketch 


Distance, group layers ALT + CMD 
Toggle fill 

Toggle border 
Hide layer SHIFT +CMD+H 
Lock layer SHIFT + CMD +L 
CMD + F 


Find layer by name 


New artboard 


15. Explore the button overrides 
Back in the main artboard, if you click the Button symbol, 
youll notice many more options in the Overrides panel. 
Youre now able to change the text, icon, icon colour and 
button background colour. Let’s change the text to 
‘Search, the background to dark grey and the icon colour 
to white. 


16. Changing button text colour 

A problem with the button at the moment is if you use a 
light background colour, you wont be able to see the 
white text. Open the button master, rename the Text layer 
to ‘Light Label’ duplicate it, naming the new one ‘Dark 
Label and changing its text colour to #3B3B39" Back in 
the main artboard, change the button colour to white, the 
icon colour to dark grey, move the Search text to Dark 
Label and add an empty space to Light Label. Finally, 
move the button to the top right of the header, aligning 
with the last column (X:1191 Y:33). 
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17. Setting resize rules 

If you resize the button horizontally, you may notice the 
text moves and the icon distorts. Let’s add resizing rules 
to control this behaviour. In the Button symbol, click the 
Icon layer, and in the Inspector toolbar you will see a 
Resizing area. Toggle the fixed width and height options, 
and set it to right aligned. For the light and dark labels, 
you just need to set them to align left. 


18. Finish header 


To finish up the header, add a white 48px heading saying 
‘Find your perfect holiday, it’s out there... which you 
Should then centre within the header (X:286 Y:183). 


City Name (2p) cB 
=| 


19. Create city symbol 

Use what you've learned to create the above symbol. You 
can find the arrow at ‘support-images/icon-arrow.svg’. For 
the image, draw a rectangle and instead of masking, add 
the same image from the header as a fill (it’s the fifth 
option along in the Fills menu). Once done, convert it into 
a symbol called ‘Components/City’, and add it to your 
main artboard (X:148, Y:585). If you'd prefer, you can also 
grab the symbol from ‘support-images/city-component. 
sketch’, which you should copy and paste directly into 
your Symbols page. 


20. Adding Craft 


There's plenty of useful plugins that dramatically extend 
Sketch’s functionality. A particularly great one is called 
Craft, which can be found at invisionapp.com/craft. 
Once installed, six new buttons appear next to the 
Inspector toolbar. 


21. Using placeholder data 

With Craft, we can quickly generate placeholder content. 
Select the city symbol, then select the third Craft icon 
down. This brings up a menu with all the different types of 
placeholder content. Under Type, select Cities and then 
the city name text layer. This should add a random city 
name to the city symbol. 
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Useful keyboard 
shortcuts 

One way to maximise your 
productivity in Sketch is to 
master the use of keyboard 
shortcuts. In this tutorial, 
we've learned a few already. R 
opens the rectangle drawing 
tool, Enter activates point 
editing mode ona selected 
shape, holding Shift moves 
layers by 10px with the arrow 
keys, whilst T activates the 
Text tool. Obviously, there’s 
plenty more to learn, so 
we've included many of the 
most useful shortcuts in the 
screenshot to the left. These 
commands assume all of your 
keys still have their default 
bindings, so for people like 
me, who swap around Cmd 
and Ctrl, you’ll need to take 
that into account. 


22. Add placeholder currency 

Next, select the currency option, entering ‘From £ into the 
text input and selecting 100-999. In the pop-up menu, 
choose the Light Label layer. This should randomise the 
price in the button text. 


23. Using placeholder photos 

In the Craft placeholder menu, select the Photos tab 
and then choose Unsplash. Select a category of City, 
the Place Photos button and then select your symbol’s 
picture layer. This adds a random city photograph to 
your symbol. 
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24. Duplicating Content 

Now for the final, fun part. Select your city symbol again 
and then the fourth craft menu, called Duplicate. Tick the 
Vertical option, enter a count of 3, followed by a gutter 
size of 60. Then tick Horizontal, select a count of 3, with a 
gutter size of 27. Click Duplicate Content. 


New Darrel 


25. You've built a webpage in 
Sketch - congratulations! 

There you have it - duplicated, randomised content. You 
can tweak the initial duplicate values by opening the Craft 
Duplicate menu again and then selecting the Duplicate 
Control layer. Any edits to the original city symbol will filter 
down to all these instances, saving you lots of time. 
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WE'RE ALL ONLY TEMPORARILY NOT 
DISABLED - BY CONDITIONS OR 
CONTEXT. PLUS ACCESSIBLE DESIGNS 
ARE BETTER FOR EVERYONE. 30 
CREATE INCLUSIVE SERVICES FOR: 
VOU, THOSE YOU LOVE AND ALL USERS, 
NOW AND IN FUTURE. IT'S RIGHT, 
SENSIBLE AND COST-EFFECTIVE 


James Buller 
Access needs team - Home Office Digital 
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Some of the key areas to explore 


ARIA ROLES 


Accessibility starts with markup. 
ARIA tags cover everything from 
annotating a page to identifying 
states and properties of elements, 


and help users with screen readers 
understand everything about your 
web page. The ‘markup’ section 
(pg. 76) covers all of this, and how 
to both show and hide content 

for this platform. 


IMAGE & SVG 
ACCESSIBILITY 


Imagery can be one of the biggest 
barriers to user interaction. Learn 
how screen readers interpret 
imagery and, with the advent of 
SVGs, find out the different ways 
you can make your graphics 
accessible, and the potential pitfalls 
of using icons to infer meaning. 


he World Health Organisation 

(WHO) first published its formal 

definitions of disabilities in 1980, 
but updated them at the turn of the 
2\st century to not simply refer to a 
disability as a “personal attribute’, but 
to be “context dependent... reflecting 
the interaction between features of a 
person's body and features of the 
society in which he or she lives.” 

The WHO's point was that disability 
happens during interactions between 
a person and society on a physical 
and cognitive level, and the web is 
a huge part of that. There are 
mismatches between how a user 
interacts with the web, or even their 
computer, that differs from that of the 
people that made it. 

These conflicts can prevent a 
person from engaging, and 
sometimes even interacting, with 
the content of a site. 


s 
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CONTRAST LEVELS 


This is an area that affects not just 
users with low vision, but those 
with dyslexia and autism. You may 
be pleased with your design, but 


is the colour scheme preventing 
some users from interacting with 
your content? It’s easily tested for, 
and there are ways to turn this 
issue into a positive addition 

to your website. 


It is the job of designers and 
developers to factor in these cases 
and create inclusive web experiences 
that work for the largest number of 
people possible. 

The W3C has a comprehensive 
list of requirements that can be 
completed to achieve web 
accessibility, be that at AA or the 
Stricter AAA level. However these are 
not enforced and, as a result, often 
overlooked, and the last full version of 
the WCAG (Web Content Accessibility 
Guidelines) was released nearly a 
decade ago. However, there are in 
fact many simple ways to make your 
sites more accessible, and ensure 
that the most people possible can 
enjoy your content. 

Last year the Home Office released 
some posters offering guidance for 
designers and developers on how to 
make sites accessible to everyone. 


They outlined rules to help those with 
low vision, deafness, dyslexia, anxiety, 
users on the autism spectrum, or 
those using screen readers. 

We will look over some of the basic 
changes you can make in markup, 
styling, and imagery to improve your 
site’s accessibility, and then use these 
pointers to tackle some of the design 
and development challenges 
associated with specific disabilities. 

My own approach to accessibility is 
with Octopus Energy. As an energy 
Supplier, we need to cater to a very 
wide range of needs. Everybody 
needs energy and it’s a basic human 
right. However in this industry it’s 
dominated by large suppliers using 
legacy systems and generally poor 
Support for accessibility. There will 
be some improvements and 
advancements we've made in this 
article as practical examples. 
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SKIP TO MAIN CONTENT 


As part of making your website 
accessible to keyboard-only users 
and screen readers, learn how to 
implement a small ‘skip to main 
content’ button to save your users 
time and unecessary stress. It 
requires only a few simple lines 

of markup and styling to achieve, 
and you can see how in the ‘styling 
& imagery’ section (pg. 77). 


COLOUR BLINDNESS 


Colour blindness can encompass 
such a wide range of things visually, 
meaning that it’s very likely that 
users are seeing your site 
aesthetically from thousands of 
Slightly differing perspectives. In the 
‘low vision’ section (pg. 79) we talk 
about the different types, how to test 
pages under those circumstances, 
and how to plan for them. 


ACCESSIBILITY 


SUBTITLES & CAPTIONING 


Videos are a great way to provide 
information to your users in an 
engaging format, however without 
subtitles or captioning, they can 
alienate users who are deaf and 
even those who don't speak the 
language in your videos. Check the 
‘deaf/hard of hearing’ section (pg. 
80) to learn more about subtitles 
and captions. 
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ACGESSIBILITY 


BETTER MARKUP The easiest first step towards an accessible site 


HEADING STRUCTURES 


All headers in a web page should 
have a hierarchy, beginning with the 
most important header to the least, 
and the markup of the page should 
reflect that. In HTML, the most 
important title is an <h1> tag, and can 
go all the way down to an <h6>. You 
Can use as many or as few of these as 
you like, but they must start with an 
<h1> and must always be used in 
order. The reason for this is that 
heading tags denote importance to 
screen readers, and out of order 
headers may well confuse a user. 
Proper heading structure also 
benefits the SEO of your page. 

You can check this using the 
HeadingsMap extension for Chrome. 
When run on a page, this generates a 
tree based on the headings on your 
page, and highlights any that are out 
of place or have been skipped entirely 
Tip: To dispel a common myth, having 
multiple <h1> tags in a page is no 
longer a huge taboo. Google itself 
States that you can have up to three 
<h1> tags in a page that are used to 
garner its content. It’s important that 
those <h1> tags remain on the same 
hierarchical level as each other, and 
that as you make your way down the 
heading ladder, no rung is skipped or 
added out of place. 


HTMLo OUTLINE 


HTML5 Outline is the concept that - 
rather than being restricted to a 
cascading style when it comes to 
headers - the structure of a document 


could be split into sections through 
markup and that each of these 
sections could have their own heading 
hierarchy. The user agent could then 
more easily apply this information to 
generate a table of contents which 
could then be used by assistive 
technology to help the user navigate. 
For example this would be the 
current approach with headings 
always Cascading: 
<div class=”section” 
id=”brazil-weather” > 
<h1l>Brazil weather</h1> 
<p>. ..</p> 
<div class=”subsection” 
id=”brazil-landmarks”> 
<h2>Landmarks</h2> 
<p>. ..</p> 
</div> 
</div> 
You could have a system like this: 
<section> 
<h1l>Brazil weather</h1> 
<section> 
<h1>Landmarks</h1> 
<p>. ..</p> 
</section> 
</section> 
The key here would be to make sure 
that each *<section>’ tag is easily 
identified, and has an appropriate 
header, and that no parts of the page 
are “marooned” from a screen reader's 
perspective without context. Although 
this feature has been in the W3C spec 
since 2008, it has yet to make it 
beyond a theoretical stage. However, 
it’s possible that it could make the 
whole page - not just its headers 
- more digestible for screen readers. 
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OFF-SCREEN HEADERS 


Whilst auditing your site, you may find 
that certain sections lack context as 
they dont have - and in many cases 
visually need - a header. A common 
example of this would be navigation. 
With this example you can tackle it 
with the ‘navigation’ aria-role or using 
the <nav> tag, but what about less 
obvious sections? 

You can create a header with a 
small class that visually hides it, but will 
show up ona screen reader like So: 

<h1 class=”screenreader- 

visible”>This is my section</ 
h1> 


.screenreader-visible { 
position: absolute; 


width: 1px; 
height: 1px; 
padding: Q; 


margin: -1px; 
overflow: hidden; 
clip: rect(@,0,0,0); 
border: Q; 


Tip: Bootstrap has utility classes built 
in that can include content for screen 
readers only and enables only those 
assistive devices to focus on it, see * 
sr-only’ and ‘sr-only-focusable’ in the 
latest version. 


ARIA ROLES 


Accessible Rich Internet Applications 
(ARIA) defines a way to make web 
content and web applications more 
accessible to people with disabilities. 
ARIA Landmark Roles help assistive 
device users navigate your site, 
enabling them to tell the difference 
between different sections. There is a 
full list on the W3C website, but these 
are the important ones to remember 
since they cover the core area of a 
typical page: 
banner - Typically the header of 
your web page that includes the 
name of the website 
search - For the search form 
main - This would designate the 
main content area on your site 
navigation - Use on any navigation 
list, typically on the nav element 


contentinfo - Typically the footer 
of your web page 

To add an ARIA role, you simply add 
the ‘role’ attribute to your element with 
one of the attributes. 

<header role=”banner” 
| class=’site-header”> 
As well as the above landmark roles, 
there are also roles relating to ‘widgets 
(button, slider), composite roles 
(menubar, tablist), and document 
structure roles (region, toolbar). 


States and properties 

As well as properly marking the 
sections and roles of a page, there are 
also ARIA tags related to state and 
properties, enabling you to provide 
context as an action is being carried 
out. For example, you can inform 
people with screen readers of certain 
visual functionality such as an 
autocomplete, if a radio button is 
checked or not, or even the min, max, 
and current values of components like 
Sliders. There are even ARIA state roles 
for drag and drop functionality. 

It's worth taking some time to look 
over the full list (http://bit.ly/2EB2JJb) 
to acquaint yourself with them, as it is 
one of the biggest accessibility gains 
you can make on a website. 


Tip: HTML5 implicit mapping 

In HTML5, several of the landmark 
roles are implicitly defined within 
certain tags to make things easier. 
main = <main> 

navigation = <nav> 

contentinfo = <footer> 

article = <article> 
complementary = <aside> 
region= <section> 


Aria hidden 
Sometimes it can be just as important 
to hide content as it is to label and 
annotate it. The ‘aria-hidden’ property 
is really handy for hiding components 
that are on a page for purely visual 
purposes, SUCH as icons, SO people 
who are using screen readers dont 
have to spend time listening to 
them needlessly. 

<p aria-hidden=”true”> 

This content is hidden. 

</p> 


Focus styles 

There are default browser styles for 
focused elements, but it’s fairly 
common for developers to apply 
blanket rules to these selectors due to 
the less than preferable blue line it 
shows when a user clicks them. 
However, these are really important. 
For example, try navigating a web 
page using just the keyboard and 
youll see how important focus 
styles are to make you aware of 
where you are on a page. 

Since they're seen when a user 
clicks the element as well as when 
they're focused via keyboard, focus 
styles need to tread the line between 
being obvious and not negatively 
impacting a page's design. Nice 
alternatives to the typical outline rule 
can be box shadows or changes in 
background and border colour. 


Skip to main content 

A massive gain you can make in 
accessibility primarily through styling 
is the ‘skip to main content’ link. As 
most pages on a site have a common 
navigation or header at the start of 
every page, it can leave users on 
screen readers listening to the same 
content as they navigate around your 
site, or having to skip through 
elements and guess where each 
page's unique content starts. Instead, 
you can make a simple link to take 
them right to it in two easy steps: 


1. Add the markup for the link as the 
first piece of content on the page 


ALT TAGS 


Ever questioned the importance of 
‘alt’ tags? Have them read out to 
you at speed by a screen reader 
and you'll be persuaded. The only 
real rule here is to ensure that the 
text used actually describes what is 
in the image, rather than the 
image’s purpose within the page. 
For example, the ‘alt text’ for an 
image of a tree used as an “About 
Us” page banner should be “an 
image of a tree,’ rather than 
“About us banner image.” 


ACCESSIBILITY 


Making a site better for eyes and ears 


semantically, and have the link point to 

a ‘<div> containing your page's 

main content: 
<a class=”skip-to-content” 
href="#content”>Skip to main 
content</a> 


<div id=’”content”> 
</div> 


2. Use CSS similar to the * 
screenreader-visible’ class we 
mentioned in the ‘markup’ section 
to effectively hide the link from the 
normal page style: 
.skip-to-content { 
position: absolute; 


top: -4@0px; 


As screen readers are only interested 
in the content of the page, this will 
mean that, as the first item on the 
page, the user will be immediately 
presented with the option to use the 
link to skip down to the main content. 


This feature can be useful for users 
navigating your site using just a 
keyboard with a small addition, and it 


saves them a lot of tabbing! Add some 


styles to your link when it’s focused to 
undo the absolute positioning, and it 
will appear as the user starts tabbing 
through the page's contert: 
.Sskip-to-content:focus { 
position: relative; 
top: Q; 


CSS LAYOUTS 


CSS makes it possible to create 
intricate layouts and designs in 
order to make a web page more 
attractive. But, taking this idea too 
far can end up excluding certain 
users. You need to avoid the 
assumption that it’s obvious that 
two pieces of content are linked 
because they are close to one 
another visually. A good example is 
creating a layout that isn't 
ambiguous and is capable of 
adapting to all screen sizes. 


Base font sizes 

Raising the base font size of your site 
will really helo those with low vision. 
The gov.uk site has 19px as the lowest 
font size, ensuring everyone can easily 
read its content, and prevent the need 
for them to zoom in on content. 

Make sure you dont have large text in 
paragraph tags masquerading as 
headers. The visual meaning 
attributed to it by styles will never be 
conveyed via a screen reader. 


No text in imagery 
The main problem with using an 


ICONOGRAPHY 


Icons are a neat way to display a 
status or action without the need 
for too much text. However, 
sometimes an icon is obvious to 
you but perhaps not to others. If it’s 
a custom icon it could become 
open to interpretation and 
misunderstanding, meaning that 
your attempt to create something 
cleaner and less cluttered actually 
results in confusion. It’s important 
that you ground icons that are not 
Universally used in context. 


image to show text is it takes away 

the accessibility for blind and visually 
impaired users. For instance, a blind 
user might have a screen reader set 
up on their computer to read out the 
text and menu items for them, but It 
cant read text that’s contained in an 
image unless specified in the ‘alt’ tag; It 
Simply reads any text it comes across 
on the screen. 

It is left to the ‘alt’ tags to describe 
not only the image contents itself, but 
the text within the image, and so you 
should try and keep the two separate 
as much as possible. 
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ACCESSIBILITY 


AUTISM 


COMPLEX LAYOUTS 


Autistic people often have 
heightened sensory awareness, 
and so can find busy pages 
overwhelming. It is particularly 
important to avoid complex 
layouts and ‘walls of text’. Look 
at condensing paragraphs into 
a series of bullet points, or 
providing a small ‘overview’ 
section for longer prose. 


MOBILE-FIRST 
APPROACH 


This idea of logic and simplicity 
in layout and content comes up 
in relation to a few different 
disabilities, and realistically 
almost all users. Visitors don’t 
want to be overwhelmed. A 
mobile-first approach is good 
here, and a good thing for 
accessibility in general. Learn 
to make the simplest layout due 
to screen restrictions and then 
working up is a good mentality 
for web in general. 


DESCRIPTIVE BUTTONS 


Phrases like ‘click here’ and ‘get 
started’ may seem obvious but 
are ambiguous and say very 
little independently. Whereas 
links such as ‘attach files’ or 
‘subscribe to feed’ are clear, 
concise, and unambiguous. 


FIGURES OF SPEECH 


You should always attempt to 
write in plain English instead 
of using figures of speech or 
idioms. They can create 


ambiguity and lead to a complete 


misunderstanding of the point 
that you're trying to make. 


SELF-CONTAINED 
ACTIONS 


Regardless of the context within 
which you display a button/ 
checkbox/radio button ona 
page, you should look at each 
action you ask a user to perform 


as an independent function; does 


it make sense by itself? 
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Accessibility 


The most powerful tool 
for all creative minds. 
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SVG ACCESSIBILITY & SCREEN READERS 


Screen readers have become much 
more prominent in the last decade, 
and where previously third-party 
software was a necessity to enable 
blind and visually impaired users to 
operate a computer, there is now an 
in-built system for every major 
operating system. 

Not only is this great for users 
requiring the software, it’s also made it 
universally accessible to developers; 
enabling them to hear a site they may 
have only ever seen before. 

They're made more powerful by 
the upgrades we've covered already 
on the previous pages, but it’s still 
important to consider accessibility 
when new technology is introduced. 
A great example of this is the surging 
popularity of scalable vector graphics 
(SVG) - here are a few approaches to 
make sure they can be heard. 


Alt & Role attribute 
If you are displaying SVGs through the 
‘<img> tag, it’s important to have both 
the ‘alt’ attribute describing the asset, 
but also an aria ‘role’ tag of ‘img’ to 
make the asset's purpose clear. There 
have been issues with VoiceOver on 
Safari where it will skip the image 
entirely, even it has an ‘alt’ attribute, if 
its role is missing. 
<img role="img” alt=”A picture 
of an apple” src=”/path/to/ 
apple.svg”/> 


aria-labelledby and 

aria-described by 

The better way to give your SVGs the 
same level of accessibility as images is 
to have them inline in your markup, 
and provide a ‘<title>’ and <desc>’ tag 
just inside of the main ‘<svg>’ tag. You 
can then match up the ‘labelledby’ and 
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‘describedby’ tags with the IDs of 
these elements like so: 
<svg aria-labelledby=”logo- 
title” aria-describedby=”logo- 
desc” role=”img”> 
<title id=”logo-title”>Apple 
logo</title> 
<desc id=”logo-desc”>A 
silhouette of an apple with a 
bite taken out of it</desc> 
</svg> 
This enables screen readers to 
understand the SVG much like an 
‘alt’ tag Would. 


Hidden element 
A common and recommended 
approach when it comes to browser 
Support and consistency across 
screen readers is to add a screen- 
reader-only element next to the 
‘<svg>. It’s a little bit more involved in 
comparison to the others, but tests 
have proven that all browser and 
screen reader combinations are able 
to announce the link with the 
expected text. 

<div> 

<svg class=”"icon” aria- 
hidden=”true”> 


</svg> 

<span 
class=’”visuallyhidden”>Close</ 
span> 
</div> 


If you choose this approach, it’s also 
worth adding the ‘aria-hidden="true”’ 
attribute to the SVG itself. As covered 
in the ‘markup’ section, we don't want 
screen readers to try and interpret the 
asset itself if we provide it with a 
Separate description instead. 


How to make the new wave of imagery work with audible software 


FINDING A SCREEN READER 


Mac - VoiceOver 

Built into macOS, iOS, tvOS and 
WatchOS, VoiceOver is an excellent 
screen reader that provides audible 
assistance for blind and visually 
impaired users across the entire 
operating system. 


Google - TalkBack 

Google TalkBack is an accessibility 
service for Android that helps blind 
and visually impaired users to interact 
with their devices. TalkBack handles 
user interactions with the entire OS 
and not just the web, but is fully 
Capable of acting as a screen reader 
inside the default Chrome app or any 
other downloadable browser from the 
Google Play store. 


Windows - Narrator 

Narrator has been part of the 
Windows OS in some form since 
Windows 2000. It was originally 
designed as a way to help users 
install a fully-featured screen reader. 
Now in Windows 10 it is available in 
twelve languages and is also included 
on all Windows phones. 

There is also a popular screen reader 
for Windows called JAWS VUob Access 
With Speech) that can be installed to 
read the screen with either text-to- 
speech like Narrator, or a refreshable 
Braille display. 


Linux - LSR & Orca 

There are two popular Linux-based 
screen readers that are based on open 
source. LSR was started in 2006 by 
IBM and uses speech, Braille and 
screen magnification to aid users. Orca 
is GNOME's default screen reader. 


Understanding the different 
conditions and how to design for them 


Contrast levels 

This is a tricky issue to spot 
sometimes, but easy to test. W3C 
States that the contrast level between 
foreground and background colours 
Should be at least 71 for regular text to 
be AAA compliant, and 4.5:1 for AA 
compliance. This is especially 
important for users with low vision or 
certain types of colour blindness, who 
may have trouble focusing on text 
coloured similarly to the background. 

The trick here is walking the line 
between creating the design and style 
that you want aesthetically, whilst not 
compromising the content or 
experience for those with visual 
difficulties. 

One approach that is quite involved, 
but can have brilliant results is 
allowing for customisation within your 
design. This way you dont end up 
alienating your users for the sake of 
the design. 

We tackled this problem at Octopus 
Energy. The typical design style for 
us is white text on a dark blue 
background. Although this passes 
AAA standards for contrast ratio, 
customers with visual 
impairments - and even 
some with dyslexia 
- reported problems 
being able to read 
or focus on the 
content. The 
solution we ' 
implemented was | 
to enable each 
customer to invert the 
colours of the 
communications they 
received, meaning they could choose 
an alternative option of dark text on a 
light background; 

The contrast levels between the 
two are essentially identical, but there 
Was a barrier with the former that 
there wasnt with the latter. More 
importantly, it empowered users to 
customise their experience with us 
and helped them engage with the 
communications more freely. 


When using colour to convey 
meaning or action, it is important to 


always support it with text and 
sometimes shapes. A reliance on 
colour can create a hugely confusing 
experience for colour-blind users, and 
sometimes result in a complete loss of 
contextual meaning 

One added complexity is ensuring 
that the colour scheme youre using 
works for the multiple types of colour 
blindness that a user could have: 


Red-green confusion 
This is the most commonly known 
type of colour blindness. However 
within spectrum there are several 
types of red-green confusion: 
¢ Deuteranopia & Deuteranomaly 
(also Known as green-blind) 
- Reduced sensitivity to red 
light, and a missing or reduced 
wavelength cone for seeing green 
hues. 
Protanopia & Protanomaly 
- This is where the ‘L-cones in the 
eye are either missing or defective, 
meaning that the user cannot see 
reds. The challenge here is that red 
and green are the most commonly 
used colours to infer positive or 
negative messages. This 
makes it more important 
to remember to 
ground that status 
with a 
message and/or 
icon. 


However it’s not the only colour 
combination that causes issues with 
colour-blind users: 


Yellow-blue confusion 

¢ Tritanopia or Tritanomaly 
- Users have normal red and green 
vision, but have trouble distinguishing 
yellow and red from pink, and blues 
appear greener. 

A very famous example of this was 
the white & gold / blue & black dress 
argument that gripped the internet a 
coupe of years ago. The ramifications 
of this colour confusion arent as 
dramatic on websites as red-green, but 
it is worth keeping in mind, particularly 
for things like graphs that use colour 
to associate segments with a legend 
of names. As always, it’s worth testing 
your pages just in case! 


Monochromacy 

This is the most severe form of colour 
blindness, and prevents the person for 
seeing anything but black, white, and 
Shades of grey. 

Colour blindness can encompass 
such a wide range of things visually, 
it’s very likely that users are seeing 
your site from thousands of slightly 
differing perspectives. The reality is 
you wont be able to create a colour 
scheme that can be fully interpreted, 
which means that you shouldn't rely 
on colour to convey meaning. 
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ACCESSIBILITY 


DYSLEXIA 


USE IMAGES 
& DIAGRAMS 


Try and use images and diagrams 
to support text you’re displaying, 
rather than using blocks of heavy 
text. Not only does it look more 
appealing to engage with, but it 
makes it more manageable to 
those with dyslexia. 


DON'T REQUIRE 
ACCURATE SPELLING 


You shouldn't demand 
accurate spellings for certain 
data. Components such as 
autocorrects (that we will cover 
later) allow for spelling errors 
and offer suggestions based on 
the text that the user has input. 


PROVIDE REMINDERS 


Rather than forcing users to 


remember things from previous 
pages, you can provide 
reminders or suggestions to 
alleviate the need to use 
short-term memory. 


CONSIDER 
OTHER FORMATS 


People with dyslexia often find 
information easier to learn or 
digest when it’s provided in 
different ways - consider 
producing materials in other 
formats such as audio or video 
to add variety. 


ALLOW FORA 
CONTRAST CHANGE 


Some dyslexic users have trouble 
reading on certain foreground/ 
background colour combinations 
(such as white text on a black 
background) even though it has a 
high contrast ratio. Consider 
offering the ability to change it. 
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ACCESSIBILITY 


It’s worth noting that captions and 
Subtitles are not the same thing: 
Captions are intended for deaf and 
hard-of-hearing audiences. The 
assumed audience for subtitling is 
hearing people who do not 
understand the language of dialogue. 
Also captions move around a screen 
to denote who is speaking, whereas 
Subtitles are almost always set to the 
bottom centre of the screen. 

They are however implemented 
in the same way technically, and so 
whichever challenge relates to your 
site, here’s how to tackle it: 


The <track> element 
HTML5 enables us to specify subtitles 
for a video using the ‘<track> element. 
This lets us specify the type of content 
that we're adding, the language it’s in, 
and a reference to the text file that 
contains the subtitle information. 
<video controls 
preload=”metadata’> 
<source src=’videos/video. 
mp4” type=”video/mp4”> 
<source src=’videos/video. 
webm” type=’video/webm’> 
<track label=”English” 
kind=”"subtitles” srclang=’en” 
src=”"captions/vtt/video-en.vtt” 
default> 
<track label=’Deutsch” 
kind=”subtitles” srclang=’de” 
src=”captions/vtt/video-de.vtt”> 
</video> 
Youll see in the examxple above 
that can specify the source, track 
type and source language - the 
default is English. 


VTT files 
The files that contain the actual 
subtitle data are simple text files that 
follow a specified format. The format is 
Web Video Text Tracks (WebVTT), the 
specification is still being worked on, 
but major parts of it are stable and 
ready to be used today. They are 
simple text-style files, in the 
following format: 
B® WEBVTT 

Q0:01.000 --> 00:04.000 

- This is the common sloth in 

its natural habit 

Q0:05.000 --> Q0:09.000 


Make sure that those who 
cant hear arent missing out 


- It moves very slowly along a 

branch 

- in search of food 
You simply specify the start and end 
time for the part of the video you 
want to annotate and then add the 
text within that time frame. You can 
also place this text over multiple lines 
if you want. 


Taking it further 

In addition to what we've covered, you 
could create your own ‘closed caption’ 
button to allow toggling between 
showing and hiding subtitles/captions. 
We don't have space to cover this here 
but implementation is straightforward 
and a quick online search will find 
some instructions. 

VTT files also allow for ‘voice spans’ 
to distinguish certain subtitles. For 
example, the following markup: 

Q0:00:00.000 --> 00:00:12.000 

<v Test>[Test]</v> 
would allow you to target that 
particular caption in CSS like this: 

::cue(v[voice=’Test’]) { 

color: white; 
background: red; 


Placing a phone number on your 
website can be useful to some, but 
restricting to others. 

Therefore you should ensure that 
you offer multiple means of 
communication so as not to exclude a 
certain demographic - it’s good for 
accessibility and for your business! 

Your customers should be able 
to contact you in a mode of 
communication that works for them. 
Email is the natural alternative to the 
phone, since it doesn't require an 
audible interaction. However some 
people still want the instant responses 
that often comes with phoning. In this 
case live chat, or even Facebook 
Messenger integration provides the 
best of both worlds. We offer all of 
these forms of communication at 
Octopus Energy, and have found that 
it not only enables us to communicate 
effectively with all of our customers, 
but the freedom often results in them 
taking the time to provide more 
feedback on how were doing in 
general, which is invaluable. 


up oh my gosh then the beautiful shots 


_ of star man chillin in the Tesla 


Faloon Heavy Test Flight 
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MOTOR 
DISABILITIES 


SHORT TIMEOUTS 


Commonly seen on eCommerce 
sites, and becoming more of a 
problem as they become more 
popular. For users that haven't 
had a lot of practice with 
journeys - checkout processes, 
for example, or who like to take 
time to read content and check 
input data - short timeouts 
encourage hastily completed 
actions and invite human error. 
The end result is frustration. 


LARGE HIT AREAS 


This is a design pattern that 
would help the web as a whole. 
Making clickable actions ona 
web page large rather than 
demanding precision means 
that you can avoid more of the 
frustration mentioned above 

by allowing for a much larger 
margin of error. This is especially 


important on mobile devices. 


PROVIDE SHORTCUTS 


Designers and devs should look 
at a page and work out if there 
are areas that could be simplified. 
It can improve conversion. 

A good example of this is 
converting a series of manual 
address inputs into a postcode 
lookup followed by the user 
selecting their one from a list. 


TAB INDEX 


Many users prefer a keyboard to 
navigate. Most browsers are 
very good at allowing keyboard 
interaction. However, sometimes 
there are a series of elements 
that would be easier to 
understand in an order different 
to how they’re displayed visually. 
The ‘tabindex’ attribute 
specifies the tab order of an 
element (when the Tab button is 
used for navigating). A value of ‘1’ 
keeps it in sequential order, and 
anything higher works ona 
priority system with the highest 
number being focused first. 


ACCESSIBILITY 


Finding problems are sometimes just as hard as 
ACCESSIBILITY fixing them. This collection offers some of the 
most important tools out there 


Deuteranopia On=se) 
Normal Vision 


Red-Green Confusion 

¥ Deuteranopia 
Deuteranomaly 
Protanopia 
Protanomaly 


Tritanopia 
Tritanomaly 


SIM DALTONISM 


bit.ly/IJHRCiJ | | Monochromacy 


If you’re using a Mac or iOS, this great Partial Monochromacy 
app by Michael Fortin enables you to a 


overlay a window directly over any web 
page or application you're viewing and 
see a live preview of what it looks like 
which each form of colour blindness. 
You can resize it to any size and you 
arent restricted like you are with the 
web page. It also has an iOS version 
where you can use the device’s camera. 


AILY CHECKLIST 


allyproject.com 
The A11Y project work tirelessly on 


providing clear advice and tips on web 
accessibility. It contains its own list of 
resources, an accessible widget and web page. It’s built into Chrome’s audit 
pattern library, and is worth visiting panel in the web inspector, is brilliantly 
for its blog on new approaches. detailed, and can be run instantly. 


CONTRAST RATIO ymca HEADINGSMAP 


LIGHTHOUSE 


bit.ly/2jnLfpG 

Lighthouse is a tool that audits the 
accessibility performance, best 
practices, and PWA standards of any 


feelsiieccja@ ratio 


leaverou.github.io/contrast-ratio/ Omg Taam tre ene wit bit.ly/2ZER31Nf 

Want to test a combination of two ini senrirnineencnomins The HeadingsMap extension generates 
sunmiaaie colours before using them in a design? ee oe a tree, based on the headings on a page 
#040e28 (AER white Lea Verou has made a neat online Cy nari i and highlights any that are out of place 

checker that will show you an example skisCihos ra ucenev in terms of hierarchy, or have been 


Paseo AAA lpwal ior any size 
let 


skipped entirely. It’s important for 
both screen readers and SEO. 


VOICEOVER 


apple.co/2rlUkTI 
The most comprehensive of the screen 


reading software mentioned, VoiceOver 
is built into every major Apple operating 
outputted to the browser console system and gives you a great insight into 
(yellow for warning, red for error). This . your web page's performance for those 
extension is also available in Firefox. with blindness or low vision. 


of how it looks, and displays the contrast 
ratio level and what level it passes. 


VALIDITY 


bit.ly/2BLqIx3 
A nice and easy Chrome extension to 


perform inline HTML validation checks 
on your pages, with the results being 
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8 WordPress 
SEGURITY SEGRETS 


LEARN HOW 10 PREVENT, DETER AND RECOVER FROM ATTACKS ON 
YOUR WORDPRESS WEBSITE WITH THESE MUST-KNOW TIPS 
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A great deal of vulnerability comes 
from the user accounts that 
intentionally give access to your site, 
particularly administrator and editor 
roles. If a hacker gains access to one 
of these accounts, of any user on 

the site not just the main admin's one, 
then they can make changes at will 
on the website. 

Always make sure accounts only 
have the access they need. For 
example, if a user is only going to be 
writing articles, consider giving them 
only contributor or editor access, 
never administration. Keep in mind the 
level of ability of your Users, ensuring 
that anyone with admin or editor 
access |s fully trained to use all the 
account's features to avoid accidents. 

You can add features to allow 
temporary access to a certain role 
level, ie if you have a contractor 
working on the site and they need 
temporary admin access, you could 


® \ | | 


Password 


Authorization code 


Remember Me 


1 ADD EXTRA SECURITY TO USER ACCOUNTS 


give it to them with a set time to 
expire so that you dont need to 
remember to revoke their access later 
down the line. 

If a certain role level does not need 
all of the default permissions, you can 
install a roles and permissions plugin 
to turn off certain permissions that will 
never be used. You can also create 
other roles with only specific access. 
Restrict users to only the permissions 
they need to avoid accidental or 
intentional misuse of a feature. 

To help prevent attacks coming 
from user logins, put a limit on the 
number of times an account can make 
a failed login attempt before that 
username is locked out for a period of 
time. This mostly catches out bots 
who are guessing passwords, but 
remember to warn your users that 
they should not attempt to log in more 
than the number of times you set in a 
row. If they can't remember their 


Ueemame or Email Address 


password, and if they forget their 
password, they should reset it instead 
of trying to guess! 

It’s also good practice to remind 
users to use secure passwords (over 
eight digits, with upper, lowercase, 
numbers etc), and to change them 
every so often. Remind them never to 
write their passwords down, and log 
out when they are finished with their 
session to avoid unauthorised access 
to their accounts. 

Two-factor authentication is an 
extra level of security that can be 
added to logins. They require users to 
use their authenticators when logging 
in to increase the number of 
credentials needed from just the 
Standard. Users will need an extra 
code or pin to log in, usually randomly 
generated by an app or sent to a 
phone by text. It can feel like an extra 
barrier to login for users, but it’s also 
an extra barrier for hackers. 
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8 WORDPRESS SECURITY SECRETS 


“IF A GERTAIN 
ROLE LEVEL DOES 
NOT NEED ALL OF 

THE DEFAULT 

PERMISSIONS, 
YOU CAN INSTALL 

A ROLES AND 

PERMISSIONS 

PLUGIN’ 
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8 WORDPRESS SECURITY SECRETS 


Table « Action 

wp _commentmeta =| Browse [jf Structure & Search %« Insert GA Empty @ Drop 

wp comments =| Browse ‘f Structure 4 Search %e Insert GA Empty @ Drop 
New WordPress installs make you users table, or you can create a new wp_itsec_lockouts Browse ‘ Structure Search je Insert Ge Empty @ Drop 


choose a custom username for your 


admin profile and delete the old one 


wp_itsec_log ‘| Browse 


Structure 


# Search 


#e Insert FS Empty @ Drop 


admin account, but if you installed via the Admin panel (be sure to wp_itsec_temp -| Browse 4 Structure # Search 3é Insert GF Empty @ Drop 
your site a while ago, your admin attribute all the old account posts to wp_links =| Browse 7 Structure 4 Search je Insert & Empty @ Drop 
account may have the default name of — the new one). wp_ options Browse 4 Structure @ Search #é Insert SAEmpty ©@ Drop 
admin’ - this makes it easier for You can also change the default agenniane | Browse Structure Search #é Insert Empty @ Drop 
hackers to guess your login database prefix to something other 
wp_posts | Browse /}# Structure Search je Insert Ge Empty @ Drop 
credentials as half the work is already than wp_ to add a further layer of 5 5 Sanat 5 
: wp_tennmeta irawse structure Search %c Insert Empty § rop 
done for them. Change the default obscurity to your default setups. The = * H . = ws Phy @.Urop 
admin username to something else to —_— easiest way to do this on an existing wp_terms =| Browse f Structure @ Search je Insert * Empty @ Drop 
improve security. You can do this install is via a plugin, but backup your 9 wp_term_relationships | Browse Structure Search $e Insert G Empty @ Drop 
manually via the database in the wp_ databases first. p term taxonomy | Browse |} Structure @ Search }%c Insert Gl Empty @ Drop 
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Showcase Themes Plugins Mobile Support GetiInvolved About Blog Hosting 


Download WordPress 


Stable Download The latest stable release of WordPress (Version 4.9.4) is available in two formats Download WordPress 4.9.4 


from the links to your right. If you have no idea what to do with this download, 


we recommend signing up with one of our web hosting partners that offers a 


Download targz— 8.2 me 


one-click install of WordPress or getting a free account on WordPress.com. 
Release Notification 


We've got a handy mailing list that 


Download Counter What's Next? 


With our famous 5-minute installation, setting up WordPress for the first time is simple we send a inendly message to 


We've created a handy quide to see you through the installation process. If you're upgrading whenever there's a new stable 
your existing installation, we've got a quide for that, too. And should you run into any trouble release for you to enjoy 
along the way, our support forums are a great resource, where seasoned WordPress tein 
experts volunteer their time to help you get the most out of your blog 


Looking for a Mobile App? 


You can find the nght app for your mobile device on our mobile apps page or use the button 


below to find the app in the app store on your device. 


3 KEEP WORDPRESS UPDATED 


WordPress is always updating and 
improving its builtin security, so make 
Sure that your version is the most up 
to date to stay ahead of old 
vulnerabilities and exploits. Most 
WordPress installations update 
automatically, but if yours doesnt, 
keep an eye on your Admin panel or 
Inbox to be notified of when new 
updates are ready to install. Hackers 
are on the lookout for sites that 
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haven't been updated, and only 22% 
of WordPress sites are running the 
latest version. Since WordPress runs 


almost 30% of all websites on the web, 


that’s a lot of outdated websites! 
(http://bit.ly/2G6b1JF) 

If youre running a staging site, you 
can test all updates for compatibility 
with your current theme and plugins 
before pushing live. This is good 
practice to avoid any automatic 
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updates accidently conflicting with 
existing installations. It gives you a 
chance to catch any problems before 
going into production. Dont forget to 
update your Plugins and Themes too. 
It's not just old core WordPress 
vulnerabilities that can give hackers a 
Way in; anything you install on your 


“HACKERS ARE 


ON THE LOOKOUT 
FOR SITES THAT 
HAVEN'T BEEN 


WordPress website needs to be secure 


as well. The next tip will tell you more 
on choosing trustworthy plugins. 


UPDATED” 
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Showcase Themes = Plu ris 


Featured Plugins 


4 


There's a temptation to install as many 
plugins as you have problems to solve, 
but too many plugins can cause bloat 
and one unreliable plugin can cause a 
security risk. Always check that plugins 
are trustworthy before installing. 
Download through the official 
WordPress interface or website, and 
always check the star rating and 
reviews for negative feedback that 
may indicate a security flaw. 

Plugins are created by developers 
with all different levels of ability. Even 
though plugins are vetted before 
being added to the WordPress site, 
you should always do your own 


Mobile Support Getinvolved About Blog 


A treat 
. o Ai hecks your com aria 


Hosting: 


research to make sure the code you 
are installing is solid. 

The WordPress website will tell you 
how old a plugin is, when it was last 
updated, and most importantly, if it’s 
compatible with your version of 
WordPress. A plugin that has not been 
updated in a while is not necessarily a 
bad one, it may just mean it hasnt 
needed an updated in that time. 
Check for recent reviews to confirm 
the plugin is still viable, and that it’s still 
compatible with your version. An old 
plugin with recent low star reviews 
and an unknown compatibility is 
worth avoiding. 


It’s not just the security of your own 
site you need to think about. If you 
host your sites on shared servers, you 
run the risk of cross-server 
contamination, where hackers gain 
access through a different site and are 
able to damage other sites sharing the 
Same space. Consider managed 
hosting or Virtual Private Server (VPS) 


thee 


Regularly delete unused themes 
and plugins, as even a deactivated 
plugin can be a security risk if a 
vulnerability is found and exploited. 
Keep your plugin directory clean. You 
Should only have plugins installed that 
you are currently using. Check older 
plugins when you update to see if 
they're still compatible. 

Review your plugins periodically to 
make sure you still have the best one 
for the job. There could be a new 
plugin that combines the features of a 
few that you already have and might 
be better supported, more secure and 
easier to maintain. 


hosting to eliminate this threat, where 
your site is hosted separately. 

Cost is an obvious implication, but 
for sites with high loads and traffic, 
dedicated servers can improve 
performance as well as security. 
Different hosts have different solutions; 
compare a few to assess which best 
Suits your needs. 
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- 
2 # BEGIN WordPress J 


3 <IfModule mod rewriti 
4 RewriteEngine On 

5 RewriteBase /wordpre 
6 RewriteRule “index\.| 
7 RewriteCond “{REQUES 
8 RewriteCond 4{REQUES 
9 RewriteRule . /wordp) 
L\@ </IfModule> 
11 

i2 # END WordPress 


6 MASK, LOCK 
AND HIDE 


Hackers have less leverage if they 
don't know where to start. Hide 
your WordPress version number 
from your code so only admins 
know which version of WordPress 
you're running. That way, hackers 
don't know which vulnerabilities 
are present to exploit. 

Move your login page from 
/wp-login to something that’s not 
default. This makes a huge 
stumbling block for DOS and brute 
force attack bots that trawl sites 
looking for login forms to target. It 
also adds a more aesthetic value, 
in that you can change the URL to 
something more memorable for 
your users. 

Deny external access to 
wp-config.php and .htaccess using 
the following code in your 
.htaccess file: 

<Files wp-config.php> 

order allow,deny 

deny from all 

</Files> 

<Files .htaccess> 

order allow,deny 

deny from all 

</Files> 
You can also disable file editing 
from the Admin panel if you know 
that your themes are only going 
to be edited via file uploads on an 
FTP. This prevents anyone with 
access to the Admin panel from 
directly editing files accidently or 
as a hacker with malicious intent. 
Insert the following into your 
wp-config.php file: 
define(‘DISALLOW_FILE_EDIT’, 
true); 
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7 RUN BACKUPS 
FREQUENTLY 


Make sure that your site is 

backed up in the event that your 
site is hacked and you need to roll 
back to an earlier clean version. 
How often you should run 
backups depends on how often 
your site is updated. 

It’s integral to back up in a place 
where your site isn’t hosted to 
avoid any malicious activity on 
your WordPress hosting from 
infecting your backups too. 
Backups can be stored on your 
own computer or a cloud-based 
service like Google Drive, Dropbox 
or Amazon S3. 

Backing up ina location that is 
not your current server also helps 
if you have an unresolvable plugin 
or theme conflict and can’t access 
your site, or if there’s a 
catastrophic server malfunction 
and you lose all your work. 

Dedicated backup plugins exist 
to help you keep on track, most 
with options for scheduled or 
manual backups. Free and 
premium versions give you 
various options, BackupBuddy 
being the most popular paid 
service as they have their own 
third-party storage for your files, 
plus the ability to restore from a 
backup directly. Compare other 
plugins like UpdraftPlus and 
BackWPup for their free and 
premium versions to see which 
has the features you most value. 


iThemes 
Security 


SUC Ti 


Many security features can be added 


with a comprehensive security plugin, 


such as iThemes Security or Sucuri, 
both of which both have free and 
premium versions. Security plugins 
come with a suite of tools to lock 
down vulnerabilities on your site such 
as those already mentioned in this 
article; from masking your version 
number, to installing two-factor 
authentication for logins, the feature 
lists are often extensive. 

These types of plugins can be 
invaluable in making your WordPress 
Site more secure, and most security 
plugins are easy to use with single- 
click installation for the most 
important features, and optional 
installation for the more advanced or 
complex features. This makes them 
perfect for WordPress beginners, as 
there’s no coding needed to get a 
well-protected site in minutes. More 
advanced users will have access to 
features that can further secure your 
site, such as closing down unneeded 


access to protocols such as XMLRPC, 
and updating the WordPress salts 
used in encoding. 

Such plugins will help to protect 
your site against brute force and DOS 
attacks, which can take your sites 
Offline if there is too much load on the 
server. They can also firm up the login 
process with additional levels of 
security to prevent your user accounts 
being used as a method of attack. 
Malware scanning and activity logs 
keep records of any suspicious 
behaviour or corrupted files for review, 
warning you of any attacks in progress 
and giving you an idea of where your 
site’s vulnerabilities lie so you can 
resolve them. 

Some security plugins also come 
with backup options, for that 
all-inclusive service. Having all of your 
security needs organised by one 
plugin means that the features are 
easy to organise, with less risk of 
conflict between similar plugins. Make 
Sure you do your research, however, 
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as this plugin is going to be the thing 
Standing in the way of your site and 
anyone wanting to cause it harm. You 
will need to pick one that will do the 
job admirably. 

Additionally, an anti-spam plugin 
such as Akismet will Keep soammers 
from clogging up your site with 
unrelated comments. If your security 
plugin isnt already doing so, it can 
assist the security plugin by adding an 
extra layer of security to your 
community interaction by using 
validation tools like CAPTCHA and 
other anti-bot devices to make sure 
only real people are commenting. An 
anti-soam plugin helps keeps your site 
clean, as well as your database behind 
the scenes. Screening for valuable 
comments has the added bonus of 
giving your content more weight by 
only showing proper engagement 
from readers. 

Each plugin comes with its own 
different tools, so compare the options 
for something that suits your needs. 
Consider premium versions of plugins 
for additional features since this is an 
integral part of your site and generally 
speaking, paid plugins will give you the 
most comprehensive service. Ideally 
you want a suite that covers at least 
the basics of security, such as the 
other tios named in this article. 
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here is a staggering amount of data 
available to us nowadays from all kinds 
of different sources. On average, nearly 
8,000 tweets are sent every second, 
which creates a wealth of information that can be sifted 
through and analysed as needed. 

Social networks allow access to all this information 
through their public APIs. Popular sites such as Twitter 
and Flickr offer free use of their systems once an 
application has been registered. With information such as 
locations, images and trending topics easily available, the 
possibilities are endless. 

But while a large set of information can be great, it can 
also be difficult to obtain any significance from it. We 
need to be selective with what we pull out and how it 
gets displayed. It can be useful to focus on one aspect of 
data, such as the words of a tweet or the location of a 
photo and extract importance from there. 

Data mashups are a quick and easy way to start 
gathering meaning from multiple sources. By tracking a 
point of data and visualising it, we can see at a glance 
What impact that is having. They can also serve as an 
approachable way to get acquainted with various data 
sets and what they offer. 

In this tutorial, we will be mashing up the Twitter, Flickr 
and Google Maps APIs to help see what's happening on 
the web around a given location. Queries will hit an 
Express server to pass JSON to the front-end. This 
application might be useful for tracking social media 
chatter around an event or simply to see what is popular 
around you right now. 


1. Install dependencies 

Before we get started, we need to pull down everything 

we will be using in this project. To fetch the data from 

Twitter and Flickr we need separate packages to help 

perform the requests and Express to help serve them up. 
Make sure Node and nom are installed first, then run 

the following command in the terminal. 

H > npm install 


€ C@ | ® localhost:3000/fetch 


working! 


2. Register for Twitter API 


To get anything from Twitter, we need to register an 
application first. Visit apps.twitter.com and click Create 
New App. Give it a unique name - Twitter will stop you 
now if not - as well as a description and a URL. 

Once complete, find the Consumer Key and Consumer 
Secret values, copy and paste them into the .env file at 
the root of the project. 


3. Register for Flickr API 


We also need to register for a Flickr API key in their App 
Garden. Head to flickr.com/services/apps/create and 
request a non-commercial API key. Once we give our 
application a name and description, we get presented 
with a couple of keys. 

Copy over the main key and paste that into the .env file 
as well. Our application does not use the secret key, so it 
can be discarded. 


4. Fetch Twitter bearer token 

We will be using application-only authentication for 
Twitter, which means we need a bearer token. While this 
means we cannot use certain user-specific endpoints, we 
get higher rate limits for the ones we can. 

Once we have one, it remains valid for the life of the 
application. Right at the top of serverjs, import a function 
that fetches the token and keeps it for when it’s needed 
later on. 

const twitterBearerToken = 
require(‘./TwitterBearerToken.js’)(); 
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Details Settings Keys and Access Tokens 


Access 


What type of access does your application need? 


Read more about our Application Permission Model. 
© Read only 

Read and Write 

Read, Write and Access direct messages 


Note: 


Af 
oe) Pee. 
Wail 


Permissions 
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5. Set up fetch router 

The server only needs one route to allow the map to fetch 
data. Adding a route with Express requires a function call 
on the main server object. 

Add a route that picks up calls to /fetch’ just before we 
Start the server with the ‘listen’ method. After that, start 
the server by running ‘nom start’ on the commana line, 
go to localhost:3000/fetch and check everything is 
working correctly. 

app.get(‘/fetch’, (req, res, next) => { 
const { lat=0, lng=0 } = req.query; 
return res.send( ‘working! ’); 


De 


6. Set up Twitter client library 

The ‘bearer token’ function imported in step 4 returns a 
promise that we can use to be sure we have it before 
moving on. 

Replace the ‘working!’ test line with a new block that 
waits for the bearer token before setting up the client. The 
client only needs the bearer token for now. 

| twitterBearerToken.then(token => { 
| const twitterClient = new Twitter({ 


Keep keys separate 


Always include any sensitive data like API keys 


from a separate file. That way they are easier to 
keep out of source control and quicker to 
change if they ever need updating. 


aoe o> terial 


Top 

On some machines, the .env file may be hidden by default. 
To open it when hidden, either find it through IDE 
navigation or the command line 


Left 

Set the permissions of the application to ‘Read only’ to 
limit the damage if any of these tokens were accidentally 
made public 
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7. Query the Twitter API 


Once the client is set up we can use it to request tweets. 
Calling the ‘get’ method on the client object makes GET 
requests on our behalf. 

Set up a query that gets 50 tweets within a 1km radius 
from a supplied set of co-ordinates. These will be sent 
from Google Maps later on. 

const twitterParams = { 
geocode: ‘${lat},${1ng},1km*, 
count: 5Q@, 

ie 

const tweetRequest = 
twitterClient.get(‘search/tweets’ , 
twitterParams) 


8. Create objects for the map 
The client call returns a promise, which lets us chain any 
modifications to that data afterwards. Not every 
geotagged tweet comes with exact coordinates, as they 
relate to a general area that matches our query. Filter out 
any tweets without coordinates and take the first ten. 
Finally, make a new object containing only the data we 
need that will get sent back to the map. Note that 
coordinates are reported as GeoJSON, which lists 
longitude before latitude. 
.then(tweets => tweets.statuses. filter( 
ts => ts.coordinates).slice(@, 10)) 
.then(ts => ts.map(t => ({ 
1 9t21028tP; 
tweet: t.text, 
timestamp: t.created_at, 


Keeping things local 


This application makes use of the Geolocation API 
to detect where the user is located. Some users 


may have this disabled, so always have a fallback to 
set location, such as clicking the map. 


Right 

Certain code editors such as Visual Studio Code can run 
Node applications, which can aid debugging with 
breakpoints and variable inspection 


Top 

Flickr provides several different sizes of an image 
depending on developer requirements. Use the smallest 
image possible for each project 
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username: t.user.screen_name, 
| lat: t.coordinates.coordinates[1], 
| Ing: t.coordinates.coordinatesLQ], 


3))) 


9. Set up Flickr client 

With the tweets collected we can move on to the Flickr 
API. Thankfully all the Flickr client needs is the API key we 
helpfully collected earlier. The library will then 
authenticate each request on our behalf. 

After the set of Twitter promises from the previous 
steps, now is the time to initialise the Flickr client, which 
you do with the key from our .env file. 
| const flickrClient = new Flickr( 
| process.env.FLICKR_API_KEY) ; 


10. Define the photos required 
The Flickr API behaves a little differently to Twitter. We 
need to be more explicit with exactly what we need it to 
return. For this project, we need the five most recent 
photos taken 1km away from our given position. The 
‘extras parameter defines the other information we 
need such as who owns it, when and where it was taken, 
and its URL. 
const flickrParams = { 

lat: lat, 

lon: lng, 

radius: 1, 

has_geo: 1, 

sort: ‘date-posted-desc’, 

per_page: 5, 


extras: ‘owner,owner_name,date_upload, 
geo,path_alias,url_m’ }; 


Explore Create 


flickr = You 


The App Garden 


GrasieaanApp API Documentation Feeds Whatis the App Garden? 


flickr.photos.getinfo 


11. Fetch the photos 


With the query set up, we can send off the request. As this 
client is made by Flickr themselves, the structure of the 
client object mimics the documentation. 

Send the request off to the ‘photos.search’ endpoint 
and map over the results. Leave the map return value 
empty for now. 

const flickrRequest = flickrClient 
. photos. search(flickrParams) 
. then(response => 
response. body. photos. photo. map ( 


photo => ({ 

/* next step here x*/ 

i 

) 

2; 
12. Populate the map 
value carefully 


Mapping over the results from Flickr lets us specify only 
the ones we need. Latitude and longitude are returned as 
strings, which Google Maps does not like. Convert these 
to floats instead. 

Likewise, dateuploaded’ is a UNIX timestamp, which 
needs to be in milliseconds for it to work in perfect 
harmony with JavaScript. 

Finally, an image link is made up of the user and the ID. 
In cases where a user has no specified alias use their user 
ID instead, which works just as well. 

Bid: photo.id, 

url: photo.url_m, 

title: photo.title, 

lat: parseFloat (photo. latitude) , 


Get information about a photo. The calling user must have permission to view the photo. 
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Add colour to 
Google Maps 
The default Google Maps 
, ’ ) fae] | styling is familiar to 
Assassin's Creed LOG IN TO FAVORITE cS va : anyone who has used the 
I\/ | f' ™ platform before. It may 
| not, however, fit in with 
' is every website design. 
Sarah Frisk @ 138408 views | ms Thankfully Google has 
siecle * 457 favorites | provided a mechanism to 
restyle every part of the 
map in order to suit the 
| Le ’ . | ™ needs of any site. 
T Every Map object 
created can take 
an optional ‘styles’ 
JAVASCRIPT STYLE ARRAY: ‘ | parameter, which consists 
3 of an array of changes 
to make to the default 


Themed map matching the colors from Assassin's Creed IV. 


[ 


*featureType" : "all", — Ps ~ styling. Every feature of 
A seinsore iad Pe } Pe the map can be restyled 

stylera";: | : | . 
{ : : ‘Tam ' or removed completely, 


"visibility": "on" a including the water, roads 
; and points of interest. 
These customisations 
can run pretty long, so 
irdendinlunae! Fda . yl it may be easier to use 
‘stylere”s 1 ' . — . an existing one asa 
starting point. Sites such 
as snazzymaps.com 
showcase existing map 
styles that can be easily 
copied into a project. 


} 


EXPAND CODE 


Need a bit more help? Download a simple example 


Ing: parseFloat (photo. longitude) , 
username: photo.ownername, 


timestamp: parseInt(photo.dateupload, 10) * 
1000, You're all set! 


link: ‘https://ww. flickr.com/ You're ready to start developing with Google Maps JavaScript AP! 
photos/${photo.pathalias ? photo.pathalias : 
photo. owner }/${photo. id}/* 


13. Create a response 
With all the data collected all that remains is to return it Choose c To improve your app's security, restrict this key's usage in the A/ 
back as the response to the original request. Once the 
requests to Twitter and Flickr are carefully complete, 
combine their promise return values into one object 
using ES2015 destructuring and send that out as 
JSON. Restart the server and check the values are 
coming out correctly. 

Promise. all( 


L[tweetRequest, flickrRequest]) 


.then(data => { name. After the key is generated, simply copy it into the 16. Download Google Maps API 
const Ltweets, images] = data; return public/Keysjs file. When we initialise ‘“SocialMap’ we have to pull in the 
res. json({ Google Maps API. To do that we add another <script> to 
tweets, 15. Initialise the SocialMap the page linking to the API files and passing through our 
images All of the heavy lifting with Google Maps will happen application key. 
ier inside the ‘SocialMap’ module. The job of mains is to load We also need to tell Google what function to call once 
}) the data points and tell ‘SocialMap’ what to do with them. that file has finished downloading. In this case it’s the 
Towards the bottom of mains, initialise the ‘SocialMap’ ‘mountMap method within the ‘SocialMap’ module. 
14. Register for Google Maps Key module at the default location, which in this application is Open up SocialMap,js and add the following to the init’ 
With the server complete, it’s time to turn to the front-end. London. We also add in callback functions to call when method. Don't forget to save the initial location for later. 
Before we can use the API, we need to get a special certain actions happen on the map. location = initialLocation; 
Google Maps JavaScript API key. Head to developers. SocialMap. onReady (onReady) ; var script = document 
google.com/maps/documentation/javascript and SocialMap.onLocationChanged( .createElement (‘script’); 
click Get a Key. As long as you are logged in with a updatePoints) ; script.src = ‘https://maps.googleapis. 
Google account, all that is needed is an application B SocialMap.init(new Point(lat, Ing)); com/maps/api/js?key=’ +KEYS .GOOGLE_MAPS 
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Before going live, limit the use of the API key to the 
addresses in use. This can be done inside Google’s 
Developer API Console. 


Right 

The west coast of Africa is at O° latitude and longitude. If 
things end up here, it’s likely Google Maps hasn’t 
understood the coordinates supplied. 


+’ &callback=SocialMap.mountMap’ ; 
document .head. appendChild(script) ; 


17. Mount the map to the page 
The map needs to be added to the page before it can be 
seen. This can be done by creating a new Map object 
with the newly downloaded API object. This takes a few 
settings, including the zoom level and location to start at. 
At the top of the ‘mountMap method, create a new 
Map object as well as an ‘InfoWindow’ object that will be 
used later to display cata. 
map = new google.maps.Map(container, { 
zoom: 16, 
center: { 
lat: location.getLat(), 
Ing: location. getLng(), 


J 
clickableIcons: false, 

Ds 

infoWindow = new google.maps 
. InfoWindow({ }) ; 


18. Mark search location 

The first thing to display is the point we are searching 
around. Each point on a map is a Marker object, which 
can take many different options. For this application, 
we need to supply ita map to attach to and coordinates 
to display at. 

Add the following to the ‘setLocation’ method, which is 
called whenever the location changes either by loading 
or clicking the map. 

location = newLocation; 

if (typeof google !== ‘undefined’) { 
locationMarker = new 
google.maps.Marker ({ 
position: { 
lat: location.getLat(), 
Ing: location. getLng(), 
}, map: map 

lee 

resetBounds(); } 
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19. Add each data point 


Once ‘main.js knows the coordinates, it will pull in the 
data for that location, create either a “TweetPoint’ or 
‘ImagePoint’ object for each point and pass those 
through to ‘SocialMap’ 

Now you can update the ‘addPoint method to add 
markers for each point. Mark the tweets with a‘T’ and 
Flickr images with ‘F’. 

var m = new google.maps.Marker ({ 
position: { 
lat: point.getLatQ(), 
Ing: point.getLngQ), 
}, map: map, 

ioe 

if (point instanceof TweetPoint){ 
m.setLabel(‘T’); 

} else if (point instanceof ImagePoint){ 
m.setLabel(‘F’); } 


20. Set and open an InfoWindow 
‘InfoWindows are the bubbles that display what a 
marker is for. Instead of creating a new one for each 
marker, we reuse the same one as to only have one on 
the screen at a time. 

After creating the marker, set up a listener to update 
the ‘InfoWindow. The content is HTML generated 
based on the data from the sever. Now you can add the 
marker to the array to keep track of it when they need to 
be cleared. 
function() { 
infoWindow. setContent ( 


m.addListener( ‘click’, 


generateInfo(point)) ; 
infoWindow.open(map, m); 


4); 


markers. push(m) ; 


21. Clear markers on new request 
Finally, when a new request is made by clicking the map, 
all existing markers need to be removed. This is done by 
removing the link between the markers and the map 

Inside the ‘clearMarkers’ method, remove the map from 
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each marker then empty the array to discard them. If 
there is a location marker, remove that too. 
markers. forEach(marker => { 
marker.setMap(null) ; 
Te 
markers. length = Q; 
if (locationMarker) { 
locationMarker.setMap (null) ; 
locationMarker = null; 
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more performant 


Take an in-depth look at how to create silky smooth 
animations. Find out which properties perform best and why 
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nimation on the web is awesome, you 
can use CSS or JavaScript to animate 
just about anything. So when we begin 
animating elements, we just go for it - 
using any property we see fit - and for a while everything 
seems fine, and then suddenly your animations start to 


stutter and the response from the browser feels heavy, 
this alone can be enough to have users leave your site. 

In order to fix these janky animations and have them 
run at a silky smooth 6Ofps - or as close as we can get to 
it - we need to understand what's going on under the 
hood in the browser. 

The explanation here is a huge simplification but 
should give you enough of an understanding to improve 
your animation performance; 

The browser receives the HTML code and parses it to 
create the DOM Tree. The browser then (using CSS and 
JavaScript) moves on to create the Render Tree. Once 
the browser has the Render Tree it can calculate layout 
and geometry (the width, height and position of 
elements) - and, in turn, animations. Before it can show 
anything on the screen, though, it needs to go through 
the render process, then finally painting to the screen. 

The render process is a lot of work for the browser to 
do, so we need to see how we can make things easier for 
it by carefully choosing how we animate our elements. 


1. Browser rendering 

The bulk of the work is done during the rendering 
process and in order to do this as quickly as possible the 
browser will split the workload across three different 
threads; the main, the raster and the GPU. 
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2. Browser rendering process 
Everything we've talked about the browser having to do 
SO far is all done on the main thread, except for drawing 
bitmaps from SVG and other elements, which are 
handled by the raster thread. The main thread is also 
where all of your JavaScript is running so is most likely 
the source of any performance issues. 


3. Browser painting 

Painting is the last step in the process. This is where the 
browser finally displays elements on the screen. Because 
painting can only be completed after the layout and 
geometry calculations have been made, painting is 
expensive in terms of performance due to the 
calculations the browser needs to perform beforehand. 


4. Properties which are 
‘expensive’ to animate 

Properties referred to as “expensive” are properties that 
will cause a reflow or a repaint. Here are just some of 
the properties that will cause a reflow or repaint and 
unfortunately reflows can often force the browser into a 
repaint in order to redraw the element in its new position: 
width, height, margin, padding, top, bottom, left, right, 
fontsize, line-height, colour, background-color, 
background-position, background-size, box-shadow, 
border-radius, etc. 


5. Properties which are 

‘cheap’ to animate 

Cheap properties on the other hand are GPU accelerated 
and won't force the browser to do a reflow or repaint. 
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These properties are handed off to the GPU thread 
leaving the main and raster threads free. If we stick to 
these properties we can animate elements cheaply and 
keep them running; transform, opacity, filter. 


6. The list is short but get creative 
So the list is short but actually were not as limited as you 
might think. The ‘transform’ property offers us a lot of 
versatility; we can move elements around the page with 
‘translate. We can change the size of elements using 
‘scale. We can ‘rotate’ and ‘skew’ elements and even 
change their ‘perspective’. 


7. The proof is in the pudding 
That’s if the pudding is made of performance tests and 
Statistics. Let’s create a simple demo so we can test this 
out. We'll create a simple menu pop-over. We'll be using 
CodePen and the SCSS compilation for these demos. 
We'll start with the HTML structure: 
<div class=”menu”></div> 
<div class=”grid”> 
<header> 
Header 
<but ton>Menu</button> 


Reflows and repaints 


A reflow is when an element’s geometry changes 
- making an element taller by changing its height, 


for example. The browser is then forced to 
recalculate the positions of every element below, 
and repaint all of the pixels which have changed. 


Above 

This screenshot shows us the layout we've created in order 
to animate it. We'll be moving the menu panel left and 
right using the button in the header 


Left 

Clicking the Call Tree tab will show us how long the 
browser calculations took to perform. The total calculation 
time using the ‘left’ property was 1.7 miliseconds 
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</header> 

<article>Article</article> 

<aside>Aside</aside> 

<footer>Footer</footer> 
</div> 


8. Basic CSS structure 


Next we need to create our page layout to force the 
browser into doing at least a little bit of work to load the 
page. We can use CSS Grid and Flexbox to very quickly 
create our page layout. 

.egrid { 


grid-template-areas: 
“header header” 
“article aside” 
“footer footer” 


ae 


9. Careful planning 
The way we have structured our HTML will enable us 
to absolutely position the menu over the top of the 
page. By doing this were already eliminating the 
possibility of a reflow and the browser will only 
need to do a repaint. 
.menu { 
position: absolute; 
top: Q; 
left: Q; 
width: $menu-width; 
height: 100%; 
a 


The filter property 


Can be used to cheaply animate an element’s 
image colour as well as other properties. You 


can animate the ‘brightnessQ’, ‘contrastQ’, 
‘blurQ’ and many other built-in functions. 


Above 

We can see in the Call Time tab that the total animation 
calculation time was much shorter than the ‘left’ and 
‘margin’ properties at 0.8 miliseconds 


Right 

The GPU thread is much more spread out and has less 
stops making for a smoother animation when using 
hardware acceleration 
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10. Toggle a state class 


Using JavaScript we can toggle the class ‘is-open’ when 
the menu button is clicked. The new ES6 syntax makes 
this really simple. We start by creating a ‘const’ for the 
menu, then a simple class toggle function, followed by 
running the function when the menu button is clicked. 
const menu = 
document. querySelector(‘.menu’ ); 
function menuToggle() { 
menu.classList. toggle(‘is-open’ ); 
Z 
document. querySelector ( ‘button’ ) 
.addEventListener( ‘click’, menuToggle) ; 


11. Animate left 


From here we can animate different properties and 
record their performance by using the browser's 
developer tools. We'll start by using the most obvious - 
we'll animate the ‘left’ property. To do this, we need to 
set the initial ‘left’ value to be the negative amount of 
width of the menu and then transition it to ‘O°’ 
.-menu { 
left: -($menu-width) ; 
transition: left 150ms; 


&.is-open { 
left: @; } } 
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12. Animate left performance 

Using the developer tools in Google Chrome we can 
record the performance of our animation. We can narrow 
the test to just the animation frames. The performance 
test will give us a visual representation of the activity on 
each of the browser's threads. 


13. Animate margin 
Next we'll animate the ‘margin property. By setting the 
margin again to the value of negative the wicth of the 
menu and transitioning it back to ‘O’ we'll be able to 
achieve the same visual result. We'll fork the last pen 
and change the ‘left’ property to ‘margin-left’ 
.menu { 
margin-left: -($menu-width) ; 
transition: margin 15Qms; 


&.is-open { 
margin-left: Q; 
j 
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14. Animate margin performance 
We'll record the performance and narrow the test to the 
animation again. lf we compare this to animating the ‘left’ 
property we can see there is slightly more activity on the 
main and GPU threads. Animating the ‘margin’ property 
took slightly longer than the ‘left’ property. 
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CSS or JavaScript? 

The rendering process described in this 
tutorial is used no matter how you apply 
your animations be it with JavaScript, CSS 
keyframes or Transitions. The work required 
by the browser is always the same. Equally 
it doesn’t matter which elements you are 
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animating, be it a ‘div’ or ashape in SVG, as 
again the same work needs to be done by 
the browser. Utilising the cheap properties 
to animate these elements will always create 
smoother, more performant animations. 
Desktop browsers are pretty good at 


handling most of what is thrown at them and 
will - in simple demos and websites - manage 
to display most animations somewhere near 
6Ofps. It’s lower-powered mobile devices 
which will benefit the most from performance 
considered animations. 


— DOM 


HTML 


15. Animate transform 
Animating the ‘margin’ and ‘left’ properties is expensive 
in terms of performance, so we'll fork the last pen and this 
time update the CSS to animate the ‘transform property, 
using the ‘translatexQ’ function. 
.menu { 
transform: translateX(-$menu-width) ; 
transition: transform 15@ms; 


&.is-open { 
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transform: translateXx(Q); to the GPU thread. It’s important to remember that the 


} main thread will often be handling many other 
} operations than in our demo. 
16. Record the animate 17. Hardware-accelerated 


animate transform 
As well as utilising the cheap properties to animate we 
can also take advantage of hardware acceleration. We 
do this using the new ‘will-change’ property and the 
‘transformZQ function for the older browsers that 
dont yet support the ‘will-change’ property. 

.menu { 


transform performance 

Again using the developer tools in Google Chrome we 

can record the performance. This time we can see that 
there is very little to no activity on the main and raster 

threads, and that the entire animation has been moved 


transform: translateZ(Q); 


will-change: transform; 


I 


18. Hardware-accelerated 
animate transform performance 
Running the performance test we can see the calculation 
time compared to the non-hardware accelerated version 
is only very slightly improved. However the GPU thread 
now has much less stopping and starting while 
performing the animation. 


19. CPU throttling 


The developer tools in Google Chrome enable us to 
throttle the processor (CPU) and, in turn, the main 
thread. By doing this we can see how our animations 
perform by running the tests again while the CPU is 

| throttled and then compare the results. 
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Web Animations 
API 


Animation standards 
on the web have been 
tricky to nail down but 
fortunately after many 
many years of trying we 
finally have an API. The 
API standardises the way 
animation is handled by 
the browser. It brings 
with it the ability to 
create animations that 
work the same across 
browsers, but it also 
means browsers are able 
to implement animation 
developer tools - like 
those found in Firefox - 
much easier than they 
previously would have. 
This API is already 
in use on the modern 
browsers when using CSS 
transitions and keyframe 
animations, but also 
has its own JavaScript 
implementation allowing 
for much finer control 
over animations, 
especially when chaining 
them or triggering them 
upon interaction. 


Left Margin Transform Transform (Hardware acceterated) 
Left 
Calculation Time 1.7 ms 1.9 ms 0.8 ms 0.7 ms The table shows the 
difference in calculation 
time for all of the 
Calculation Time (throttled) 8.4 ms 12.9 ms 14.9 ms 3.6 ms properties we animated 


20. Compare the results 

By re-running the performance test with the CPU 
throttled we can create a table to compare the 
difference in calculation times. As we can see, the 
animation performance is best under both conditions - 
that is, when were using hardware acceleration 
combined with the ‘transform’ property. 


21. Wrapping up 

The statistics from our performance tests prove that the 
‘transform’ element is more efficient for moving elements. 
While to the naked eye there may not be much difference, 
under the hood the browser is being forced to do a lot 
more work. This extra work on sites running a lot of JS will 
Slow down the performance of the whole site. 


Inside the new 
Firefox Quantum 


For a more in-depth look at how the newest 


Firefox Quantum works under the hood be sure 
to read Lin Clark’s excellent post on the Mozilla 
blog. https://mzl.la/2ABmhuH 
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Entering the Quantum Era—How Firefox got 
fast again and where it’s going to get faster 


@.\ By Lin Clark 
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People have noticed that Firefox is fast again, 


Sara S$oueidan 
@i4ra5mueihan 


@FiretoxNightly is now officially my dev 
browser. It's gotten so much better and 


Paster Since the last time | used it a 
couple yrs ago. 


Over the past seven months, weve been rapidly replacing major parts of the 
engine, Introducing Rust and parts of Servo to Firefos. Plus, we've had a 
browser performance strike force scouring the codebase for performance 
sues, both obvious and mon-obvicws. 


We call this Project Quantum, and the first general release of the reborn Firefox 


Quantum comes out tomorrow, 
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Featured host: Netcetera 


www.netcetera.co.uk 
O800 808 5450 


About us 


Formed in 1996, Netcetera is one of 
Europe's leading web hosting service 
providers, with customers in over 75 
countries worldwide. 

As the premier provider of 
data centre colocation, cloud hosting, 
dedicated servers and managed web 
hosting services in the UK, Netcetera 
offers an array of services designed to 
more effectively manage IT 


What we offer 

- Managed hosting - A full 
range of solutions for a cost 
effective, reliable, secure host. 


- Cloud hosting - Linux, 
Windows, Hybrid and Private 
Cloud Solutions with support 
and scalability features. 


5 tips from the pros 

1. Reliability, trust 

and support 

Reliability is a major factor when it 
comes to choosing a hosting partner. 
Netcetera guarantees 100% uptime, 
multiple internet routes with the ability 
to handle DDOS attacks, ensuring your 
site doesnt go down when you need it. 


2.Secure and dependable 
Netcetera prides itself on offering its 
clients a secure environment. 

It is accredited with ISO 27001 for 
Security along with the options of 
configurable secure rackspace available 
in various configurations. 


3. 24/7 technical support 


Netcetera has a committed team of 


infrastructures. A state-of-the-art data 
centre environment enables Netcetera 
to offer your business enterprise-level 
colocation and hosted solutions. 
Providing an unmatched value for your 
budget is the driving force behind our 
customer and managed infrastructure 
services. From single server to fully 
customised data centre suites, we focus 
on the IT solutions you need. 


- Data centre colocation - 
Single server through to full 
racks with FREE setup and a 
generous bandwidth. 


- Dedicated servers - From 
QuadCore up to Smart Servers 
with quick setup and 
fully customisable. 


knowledgeable staff available 24/7 to 
provide you with assistance when you 
need it most. Our people make sure 
you are happy and your problems are 
resolved as quickly as possible. 


4. Value for money 

We do not claim to be the cheapest 
service available, but we do claim to 
offer excellent value for money. We also 
provide a price match on a like-for-like 
basis, as well as a price guarantee for 
your length of service. 


5. Eco-friendly 

Netcetera’s environmental commitment 
is backed by use of eco-cooling and 
hydroelectric power. This makes 
Netcetera one of the greenest data 
centres in Europe. 
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and managed web hosting 
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One of the greenest and mast efficient 
Datacentres in the UK 
freroCcarbonDatacentre 


Testimonials 

Roy T 

: | have always had great service from Netcetera. Their technical support is 
second to none. My issues have always been resolved very quickly. ” 


Suzy B 

i We have several servers from Netcetera and their network connectivity is 
top-notch, with great uptime and speed is never an issue. Tech support is 
knowledgeable and quick in replying. We would highly recommend Netcetera. ” 


Steve B 

“ We put several racks into Netcetera, basically a complete corporate backend. 
They could not have been more professional, helpful, responsive or friendly. All 
the team were an absolute pleasure to deal with, and nothing was too much 
trouble, so they matched our requirements 100%. . 


Supreme hosting 
OCWCS ss. 


PAS ED HOSTING 
WWW.CWCS.CO.UK 
08001777 000 
CWCS Managed Hosting is the UK’s 
leading hosting specialist. [hey offer a | 
fully comprehensive range of hosting | 
products, services and support. Their 
highly trained staff are not only hosting | 
experts, they're also committed to 
delivering a great customer experience 
and are passionate about what they do. | 


- Colocation hosting ta 
- VPS 
- 100% network uptime 


Budget hosting 


Uk-based hosting 


with high-performance hosting products 
as well as the infrastructure for the 
efficient operation of sites. A combination 


SSD web hosting 


<> bargainhost 


www.bargainhost.co.uk 

0843 289 2681 

Since 2001, Bargain Host have 
campaigned to offer the lowest possible 
priced hosting in the UK. They have 
achieved this goal successfully and built 
up a large client database which includes 
many repeat customers. They have also 
won several awards for providing an 
outstanding hosting service. 


- Shared hosting 


—« Cloud servers 


« Domain names 


Value Linux hosting 


ONLINE __ ___ of stable technology, attractive pricing, 

flexible support and services has enabled 

www.hetzner.com Hetzner Online to strengthen its market 

Kee CYBERHOST +49 (0)9831505-O0 ition both nationall 5 | jonall ntsc lynnitngn 

position both nationally & internationally. | WEB HOSTING 

Hetzner Online is a professional web 

www.cyberhostpro.com hosting provider and experienceddata +» Dedicated/shared hosting patchman-hosting.co.uk 

- Colocation racks 01642 424 237 


Cyber Host Pro are committed to has provided private and business clients - SSL certificates Linux hosting is a great solution for 


providing the best cloud server 
hosting in the UK; they are obsessed 
with automation. If youre looking for a 
hosting provider who will provide you 
with the quality you need to help your 
business grow, then look no further 
than Cyber Host Pro. 


¢- Cloud VPS servers | 
- Reseller hosting q 
- Dedicated servers | 


Cluster web hosting 7 


fasthosts 


wwweasthosts.co.uk | 
O808 1686 777 | All-inclusive hosting 
UK based and operating 24/7 from | 
dedicated UK data centres. Fasthosts | 
keep over one million domains running : 
smoothly and safely each day. | 
Services can be self-managed through | www.land1.co.uk 
the Fasthosts Control Panel. 0333 3365509 
| 1&1 Internet is a leading hosting 
| provider that enables businesses, 
| developers and IT pros to succeed 
online. Established in 1988, 1&1 now 


- Dedicated servers 
- Cloud servers 
- Hosted email 


| 
| 
: 
| 
0845 5279 345 | centre operator. Since 1997 the company 
| 
| 
| 
| 
: 


operates across ten countries. With a 
comprehensive range of high- 
performance and affordable products, 1&1 
offers everything from simple domain 
registration to award-winning website 
building tools, eCommerce packages and 
powerful cloud servers. 


- Easy domain registration 
- Professional eShops 
- High-performance servers 


' home users, business users and web 


designers looking for cost-effective and 
powerful hosting. Whether you are 
building a single-page portfolio, or you 
are running a database-driven 
eCommerce website, there is a Linux 
hosting solution for you. 


/. Student hosting deals 


- Site designer 


_ + Domain names 


Flexible cloud servers 


elastichosts 


elastichosts.co.uk 

020 7183 8250 

ElasticHosts offer simple, flexible and 
cost-effective cloud services with 


_ high performance, availability and 


scalability for businesses worldwide. 
Their team of engineers provide 
excellent support 24/7 over the phone, 
email and ticketing system. 


- Cloud servers with any OS 
- Linux OS containers 
- 24/7 expert support 


listings 93 


Get your listing in our directory 


To advertise here contact Chris 


chris.mitchell@futurenet.com 
| +44(0)1225 687832 


OURSE LISTINGS 


Featured: 


N ORTH Northcoders 
CODER 


www.northcoders.com 
Twitter: @northcoders 
Facebook: Northcoders 


Northcoders is the coding bootcamp 
for the north, based in the heart of 
Manchester and built upon northern 
values of grit, determination and 
community spirit. No matter what 
your background, you can fast-track 
your career and become a web or 
software developer in 12 weeks at their 


e Full-time: 
Fasttrack your career in just 
12 weeks 


1. Get started with coding 

The best way to know if coding 
is for you is to just try it! We 
recommend the free, online 
JavaScript track of 
Codecademy to get you started 
with the basics. 


2.Do your research 

Make sure you read plenty 
of student reviews to make 
Sure youre applying 
somewhere reputable. Read 
their blog and Nave a look at 
their social channels. 


3. Throw yourself in 
Once you've decided it’s right 


full-time bootcamp, or fit their course 
around your life with their 24-week 
part-time bootcamp. Their internal 
career support team will help find you 
work as a developer, setting up 
interviews with your choices of 
Northcoders Hiring Partners across 
the north of England. 


¢ Part-time: 
Fit our Curriculum around 
your life in 24 weeks 


for you, set aside a few evenings 
each week to really start making 
progress! If coding is for you, 
this should be fun. 


4.Be prepared 

We'll be with you every step of 
the way when you apply. Make 
Sure you go through all the 
materials we recommend and 
ask for help if you're stuck. 


5. Get social 

With Northcoders, youre not 
just on a course, youre part of a 
community that will stay with 
you long after you graduate. 
Make the most of it! 


Becoming part of this vibrant, caring community was 
something | hadn't expected before the course, but 
now | couldn't be without it. To be a Northcoder is to 
be enlightened, inspired and supported. 


Joanne Imlay 


Primary school teacher to software developer at Careicon 
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- 66No matter what your 


background, you can 


fast-track your career and 
become a web or software 
developer in 12 weeks 99 


Bacome a software 
developer in just 
12 weeks 


Lnann fo code = iru just 12 eenies, 


be 
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Northcoders delivered their part of the bargain in spades. 
They provided tremendous assistance in turning me into 
the full product - a well-rounded, capable future tech 
employee - and they have the contacts to deliver the 
opportunities for such people. 

Joe Mulvey 

Maths teacher to software developer at Auto Trader 


udemy 


UDEMY 


www.udemy.com 


Twitter. @udemy 
Facebook: udemy 


The inspiration for Udemy beganina 
small village in Turkey, where founder 
Eren Bali grew up frustrated by the 
limitations of being taught ina 
One-room school house. Realising 

the potential of learning on the internet, 
he set out to make quality education 
more accessible. Udemy is now a 
global marketplace for learning and 
teaching online. Students can master 
new skills by choosing from an 
extensive library of over 40,000 
courses including HTML, CSS, UX, 
JavaScript and web development. 


40,000+ courses: There is a 
course for every designer and dev 


Self-paced learning: Learn how | 


to code at your own pace 


YARD Wl 
IRON YARD 


www .theironyard.com 


Twitter:@ThelronYard 
Facebook: ThelronYard 


The Iron Yard is one of the world’s 
largest and fastest-growing in-person 
code schools. It offers full-time and 
parttime programs in back-end 
engineering, frontend engineering, 
mobile engineering and design. The 
lron Yard exists to create real, lasting 
change for people, their companies 
and communities through technology 
education. The in-person, immersive 
format of The Iron Yard’s 12-week 
courses helps people learn to code 
and be prepared with the skills needed 
to start a career as junior-level 
software developers. 


12-week code school: Learn 
the latest skills from industry pros 
Free crash courses: One-night 
courses, the perfect way to learn 
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WEGOT CODERS 


‘2 WE GOT CODERS 


www.wegotcoders.com 
hello@wegotcoders.com 

We Got Coders is a consultancy that 
provides experts in agile web 
development, working with startups, 
agencies and government. Take one of 
their 12-week training courses that covers 
all that is required to become a web 
developer, with highly marketable 
full-stack web development skills. 


- Classroom-based training 
- Real-world work experience 
- Employment opportunities 


FUTURELEARN 


Future 
Learn 


www -.uturelearn.com 
feedback@futurelearn.com 
Choose from hundreds of free online 


_ courses, from Language & Culture to 


Business & Management; Science & 
Technology to Health & Psychology. 
Learn from the experts. Meet educators 
from top universities who'll share their 
experience through videos, articles, 


quizzes and discussions. 


_« Learn from experts 


- Free courses 


- All-device access 


listings 


GYMNASIUM 


www.thegymnasium.com 
help@thegymnasium.com 
Gymnasium offers free online courses 
designed to teach creative 
professionals in-demand skills. 
Courses are all self-paced and taught by 
experienced practitioners with a passion 
for sharing practical lessons from the 
design trenches. 


« Gain real-world skills 


- Get expert instruction 
- Career opportunities 
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Free with 
your magazine 


Essential assets Exclusive Tutorial Plus, all of this 
and resources video tutorials project files Is yours too... 
Get textures, fonts, Learn to code/create with All the assets you'll need PyAlenew iutonaltiies toheln you 


and JavaScript techniques 

* 176 minutes of expert Progressive 
Web App video from Pluralsight 
(www.pluralsight.com) 

- 24 Urban Desaturated effects and 
7 Holographic Photoshop Styles 
(www.sparklestock.com) 


backgrounds and more HTML, CSS, JS & PHP’ to follow our tutorials master this issue’s HTML, CSS 


i: Log in to www-filesilo.co.uk/webdesigner 


Register to get instant access 
to this pack of must-have 
creative resources, how-to 
videos and tutorial assets 
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The home of great 
downloads — exclusive to 
your favourite magazines 
from Future! 


f) Secure and safe online : 
\ access, from anywhere 


f) Free access for every 
9 reader, print and digital 


f) Download only the files 


\ you want, when you want 


() All your gifts, from all your 
@ issues, in one place 


Everything you need to 
Know about accessing 
your FileSilo account 


Follow the instructions 
on screen to create an 


account with our secure FileSilo Subscribe today & unlock the free 


system. Log in and unlock the 


sci gifts from more than 50 issues 


Over 60 hours More than Over 210 
of video guides 400tutorials creative assets 


| hi | 

You can access FileSilo 

on any computer, tablet 
or smartphone device using any 
popular browser. However, we 
recommend that you use a 
computer to download content, DEVELOPMENT 
as you may not be able to 
download files to other devices. 


Designing the animation test environment 


Head to page 14 to subscribe now 


If you have any 


pretlemerin “) Already a print subscriber? + 
accessing content on FileSilo, « - More 
take a look at the FAQs online Unlock the entire Web Designer FileSilo library with your mur-Tele(sve| 
or email our team at the unique Web ID — the ten-digit alonanumeric code printed above eve 
address below. your address details on the mailing label of your subscription issue 


filesilohelp@futurenet.com copies — also found on any renewal letters. 


NEAT MONTH 


25 KILLER 


SEARCH 
SECRETS 


ESSENTIAL SEO TIPS & TECHNIQUES 
TO TARGET TOP SPOT ON GOOGLE 


BUILD A WEBGL | CREATEREUSABLE GET STARTED 
RACER GAME : INPUTSFORSKETCH  : WITH RUST 


Part two reveals how to put the finishing : Want to create one element that can quickly : Learn how to start using the blazingly fast systems 
touches to this endless action game : be turned into many others? Then read this — : programming language, as used by nom 
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Visit the WEB DESIGNER online shop at ALL IN YOUR NEXT 
myfavouritemagazines 
myfavouritemagazines.co.uk [SSW Te) ans) (= 

for the latest | issue, back issues and specials QULetek erga WAN) gi 00 fs: 


htinhith a & 


98 next month 


Mockup, wireframe, diagram, prototype 
& collaborate with one flexible solution. 
moqups.com 


7 This is the moment 
fa when a click 


turns into a lead. 


PRESS AHEAD — 


WP Engine's digital expe e platform dri your bu s forward faster. wpengine.co.uk wPengine’ 


